Javascript - 更改html标记类型

Question

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

但我不想让内容空白.像这样:

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

至

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

任何的想法 ？

Answer 1

基本上，您创建一个新元素，将属性传递给它，然后传递子元素，最后用新元素替换该元素。

我还提供了一个区分大小写的元素的示例，例如<svg>. 出于区分大小写的目的，您不应使用innerHTML. 而是使用while带有 的循环appendChild。

function changeTag (node, tag) {
  const clone = createElement(tag)
  for (const attr of node.attributes) {
    clone.setAttributeNS(null, attr.name, attr.value)
  }
  while (node.firstChild) {
    clone.appendChild(node.firstChild)
  }
  node.replaceWith(clone)
  return clone
}

function createElement (tag) {
  if (tag === 'svg') {
    return document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  } else {
    return document.createElementNS('http://www.w3.org/1999/xhtml', tag)
  }
}

const node1 = document.getElementById('node1')
console.log(node1.outerHTML)
console.log(changeTag(node1, 'a').outerHTML)

const node2 = document.getElementById('node2')
console.log(node2.outerHTML)
console.log(changeTag(node2, 'svg-custom').outerHTML)

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

 <svg id="node2" height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Answer 2

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 3

不可以.您无法更改DOM节点的tagName(nodeName).

您只能创建所需类型的新节点,复制所有属性(可能还有属性)并移动子节点.然而,你会失去像附加事件监听器这样无法访问的东西.例如,当您想要更改inputIE中的类型时,可以使用此技术.

但是,绝对没有理由将a更改a为a div,它们具有完全不同的语义(也是行为和布局).

Answer 4

当然可以，但是为什么呢？

\n\n

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

\n

Answer 5

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

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

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

但请不要这样做。例如，它会中断鼠标中键单击（对于新选项卡）。