javascript - 如何使用 JavaScript 更改 HTML 标签

Question

考虑以下代码:

var element = document.CreateElement("div");
element.toString(); // [object HTMLDivElement]

var element = document.CreateElement("somerandomtag");
element.toString(); // [object HTMLUnknownElement]

我的直觉是，一旦创建了一个元素，它本质上就是“强类型”(如果 JavaScript 中存在这样的东西)，因为“div”创建了一个 HTMLDivElement 和“somerandomtag”创建一个 HTMLUnknownElement，因此该标签无法更改，因为创建的对象直接对应于该标签。

考虑以下代码:

var element = document.CreateElement("div");
element.toString(); // [object HTMLDivElement]

element.nodeName = "span"; // Doesn't work.
element.tagName = "span"; // Doesn't work.

那么，是否可以在对象创建之外将元素从一种类型(例如“div”)更改为另一种类型(例如“span”)？

编辑:请注意...必须使用纯 javascript 完成...没有 jQuery 或其他库/api

Answer 1

An element's tagName is readonly (immutable)不管元素是什么。如果不重建 DOM，则无法更改元素的标签名称。也就是说，不可能更改现有元素，但创建新元素并附加现有元素的子元素并不困难。

var node = document.querySelector('div'),
    newNode = document.createElement('span'),
    parent = node.parentNode,
    children = node.childNodes;

Array.prototype.forEach.call(children, function (elem) {
    newNode.appendChild(elem);
});
parent.replaceChild(newNode, node);

http://jsfiddle.net/ExplosionPIlls/wwhKp/