Javascript:如何更改节点名称?

Ada*_*dam 4 javascript element edit

例如,我有这个HTML:

<body>
    <div>Text</div>
</body>
Run Code Online (Sandbox Code Playgroud)

我想改变div其他类似的东西p.

这是我尝试但不起作用的:

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

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

Fel*_*ing 9

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

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

但是,如果原始元素包含不能作为新节点后代的节点,则可能导致无效标记.

参考:document.createElement,Node.replaceChild


注意:可以在/sf/answers/600891091/找到更好的版本(因为它不依赖于将DOM序列化为文本并返回并保留属性).