Javascript：如何更改节点名称？答案

【问题标题】：Javascript: How to change a nodes name?Javascript：如何更改节点名称？
【发布时间】：2011-02-14 23:05:58
【问题描述】：

例如我有这个 HTML：

<body>
    <div>Text</div>
</body>

我想将 div 更改为 p 之类的其他名称。

这是我尝试过但不起作用的方法：

var div = document.getElementsByTagName("div")[0]; // Get Element
    div.nodeName = "p"; // Change It's Node Name to P

请不要使用库，我真的不想用新的 p 替换实际的 div :)

【问题讨论】：

标签： javascript element edit

【解决方案1】：

你不能只改变一个元素。你必须创建一个新的。例如：

var div = document.getElementsByTagName("div")[0];
var p = document.createElement('p');
p.innerHTML = div.innerHTML;
div.parentNode.replaceChild(p, div);

但这可能会导致无效标记，如果原始元素包含不能是新节点后代的节点。

参考：document.createElement，Node.replaceChild

注意：更好的版本（因为它不依赖于将 DOM 序列化为文本并返回并保留属性），可以在 https://stackoverflow.com/a/8584158/218196 找到。

【讨论】：

好吧，我也这样做了，但是没有任何预定义的 javascript 函数之类的吗？ :)
我也从其他人那里得到了我的评论的答案，如果 Mozzila 说的话，这可能是最好的方法:)
不复制属性！
@John：你的来源是什么？哪些浏览器会导致问题？
@John：也许它在某些时候是专有的，但看起来不像是：html.spec.whatwg.org/#dom-innerhtml，w3c.github.io/DOM-Parsing/#the-innerhtml-mixin。

【解决方案2】：

你不能。

作为the MDC docs say:

nodeName 是只读属性。

您必须创建一个新元素并为其赋予正确的内容和属性。

【讨论】：

【解决方案3】：

之所以不能只更改tagName 属性，是因为不同的HTML 标记实际上是不同的对象类。 div 标签是 HTMLDivElement 实例，p 标签是 HTMLParagraphElement 实例，依此类推。这些类可以具有截然不同的属性和接口，因此将一个类转换为另一个类并不像您想象的那么简单。

【讨论】：

【解决方案4】：

你不能。您所追求的属性是 tagName，但它是只读的。相反，您必须创建所需类型的新节点，然后将 innerHTML（以及任何其他属性，如 className 或 style）传输到新节点。然后，将新节点插入到旧节点的父节点中，然后移除旧节点（或使用replaceChild）。

换句话说，长路是唯一的路。

【讨论】：

【解决方案5】：

我在 XML 场景中解决了这个问题（例如，没有 innerHTML）：

function renameNode (node, newNodeName) {
    const newNode = node.ownerDocument.createElement(newNodeName);
    Array.from(node.attributes).forEach(attr => newNode.setAttribute(attr.localName, attr.value));
    Array.from(node.childNodes).forEach(childNode => newNode.appendChild(childNode));

    node.parentElement.insertBefore(newNode, node);
    node.parentElement.removeChild(node);
}

不返回任何内容，但会更新您的 DOM。

【讨论】：