Javascript：如何更改节点名称？

发布于 2024-10-17 18:46:45 字数 373 浏览 9 评论 0原文

例如，我有这样的 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 :)

原文

For example I have this HTML:

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

And I would like to change the div to something else like p.

This is what I have tried but doesn't works:

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

Please no libraries, and I don't really want to replace the actual div with a new p :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等往事风中吹 2024-10-24 18:46:45

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

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。

You cannot just change an element. You have to create a new one. E.g.:

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

But this could lead to invalid markup, if the original element contains nodes that cannot be descendants of the new node.

Reference: document.createElement, Node.replaceChild

Note: A better version (because it doesn't depend on serializing DOM to text and back and preserves attributes), can be found at https://stackoverflow.com/a/8584158/218196 .

回复收藏 0 原文

傲性难收 2024-10-24 18:46:45

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

回复收藏 0 原文

我也只是我 2024-10-24 18:46:45

你不能。

正如MDC 文档所说：

nodeName 是只读属性。

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

回复收藏 0 原文

单身狗的梦 2024-10-24 18:46:45

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

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

回复收藏 0 原文

肥爪爪 2024-10-24 18:46:45

我在 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。

I solved this in an XML scenario (eg. where there is no innerHTML) like so:

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);
}

Does not return anything, but will update your DOM.

回复收藏 0 原文

~没有更多了~