Question

我有一个问题，我可以将html标签替换为另一个吗？

但我不想让内容空白。像这样：

<a data-text="text">content</a>

到

<div data-text="text">content</div>

有什么想法吗？

Answer 1

没有。您无法更改DOM节点的tagName（nodeName）。

您只能创建所需类型的新节点，复制所有属性（可能还有属性）并移动子节点。然而，你会失去像附加事件监听器这样无法访问的东西。例如，当您想要change the type of an input in IE时使用此技术。

但是，绝对没有理由将a更改为div，它们具有完全不同的语义（也包括行为和布局）。

Answer 2

确定，但为什么呢？

var a = document.getElementsByTagName('a');
var src, el, attrs;
for(var i=0,l=a.length;i<l;i++) {
    src = a[i];
    el = document.createElement('div');
    attrs = src.attributes;
    for(var j=0,k=attrs.length;j<k;j++) {
        el.setAttribute(attrs[j].name, attrs[j].value);
    }
    el.innerHTML = src.innerHTML;
    src.parentNode.replaceChild(el, src);
}

Answer 3

这将是无效的HTML（div元素没有href属性）并且不再像链接那样。

但是，您可以使用JavaScript模拟行为：

$('div').on('click', function() {
    location.href = $(this).attr('href');
});

但请不要这样做。例如，它打破了鼠标中键点击（对于新标签页）。

Answer 4

使用

var href=$("#aId").attr('href');

$("#aId").replaceWith($("<div"+href+">" + $("#aId").innerHTML + "</div>"));

Answer 5

这是在HTML代码中执行此操作的简单方法。通过一些嵌入式样式和javascript代码，这可以为您提供所需的效果......

<div style="display: inline; color: blue;" onclick="window.location='link/url';">Click!</div>

Answer 6

2018更新：

使用ChildNode.replaceWith()方法。如MDN文档中所示：

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");

child.replaceWith(span);

console.log(parent.outerHTML);
// "<div><span></span></div>"

此answer中的更多信息：

请注意，因为2018年7月是一项实验性技术，不受IE支持。

Answer 7

<input id="tmpType" type="text" name="password" />

<script type="text/javascript">
    document.getElementById('tmpType').type = 'password';
</script>

我用它来显示/隐藏动态表单上的密码

Answer 8

这是解决此问题的一种更现代的方法（2020年以后）。

基本上，您创建了一个新元素，将属性转移到该元素，然后转移了子元素，最后，用新元素替换了该元素。

const p = document.getElementById('foo')
const a = document.createElement('a')
for (const attr of p.attributes) {
  a.setAttribute(attr.name, attr.value)
}
a.innerHTML = p.innerHTML
p.replaceWith(a)
console.log(a.outerHTML)

<p id="foo" class="x" rel="follow">
    Some <b id="a1">bold</b> text
  </p>

Answer 9

简短的现代香草方式

const atts = Array.prototype.slice.call(elem.attributes)
elem.outerHTML = `<div ${atts.map(
  attr => (attr.name + '="' + attr.value + '"')
).join(' ')}>${elem.innerHTML}</div>`

此解决方案将转换您的标签名称并保留所有属性，而无需您自己从 DOM 中删除和添加元素。浏览器会为您处理，因此您必须从 DOM 重新加载元素才能在转换后访问它。

示例

let elem = document.getElementById("test")
const tagName = 'div'

const atts = Array.prototype.slice.call(elem.attributes)
elem.outerHTML = `<${tagName} ${atts.map(
  attr => (attr.name + '="' + attr.value + '"')
).join(' ')}>${elem.innerHTML}</${tagName}>`

elem = document.getElementById("test") // reload required
console.log(elem.outerHTML)

<span id="test" data-test="123">I want to be a div.</span>

不需要保留属性？

elem.outerHTML = `<div id="test">${elem.innerHTML}</div>`

这个单行代码可以做到，但请记住，elem 将指向旧元素，就像上面的解决方案一样。

示例

let elem = document.getElementById("test")
const tagName = 'div'

elem.outerHTML = `<${tagName} id="test">${elem.innerHTML}</${tagName}>`

elem = document.getElementById("test") // reload required
console.log(elem.outerHTML)

<span id="test">I want to be a div.</span>

使用这些方法，您总是需要从 DOM 重新加载对象才能继续使用它，因为浏览器会创建一个新的 DOM 元素并将其放置在后台。

Answer 10

这是一种无需jQuery即可更改元素标签的方法-

// Just provide the element and the new tag

function changeTag(el, newTag) {
    var outerHTML = el.outerHTML // Get the outerHTML of the element
    var tag = el.tagName // Get the tag of the outerHTML
    var r = new RegExp(tag, 'i') // Prepare a RegExp to replace the old tag with the new tag
    outerHTML = outerHTML.replace(r, newTag) // Replace it
    el.outerHTML = outerHTML // Set the outerHTML of the element
}

<span>Span 1</span> -- <span>Span 2</span>
<br>
<button onclick="changeTag(document.querySelector('span'), 'div')">
Change tag
</button>

Javascript - 更改html标记类型

10 个答案:

简短的现代香草方式

示例

不需要保留属性？

示例