Question

如果我在页面上有一个现有的elementA，我使用document.createElement(...)来创建elementB。 elementA和elementB不是同一类型的标签（例如.h1和iframe，即不能使用innerHTML），如何在不使用jQuery的情况下将elementA替换为elementB？

我尝试了什么（在删除旧版之前插入新版本）：

elementA.insertBefore(elementB, elementA.firstChild);
elementA.parentNode.removeChild(elementA)

上面不起作用，因为elementB作为elementA的子项插入，删除elementA后删除它们。

Answer 1

您可以使用node.replaceChild

Node.replaceChild（）方法替换了一个子节点指定的节点与另一个。
replacedNode = parentNode.replaceChild(newChild, oldChild);
newChild是替换oldChild的新节点。如果它已经存在于DOM中，则首先将其删除。

oldChild是要替换的现有孩子。

被替换的节点是被替换的节点。这是与oldChild相同的节点。

＆＃13;

var a = document.getElementById('A')
var h = document.createElement('h1')
h.appendChild(document.createTextNode('Title h1'))
a.replaceChild(h, a.firstChild)

＆＃13;

<div id="A"><p>Paragraph A</p></div>

＆＃13;

Answer 2

您希望将父元素elementA替换为elementB，以便elementB拥有elementA的第一个子元素。

实现后者的一种方法如下：

// Append `elementB` to `elementA.parentNode` first:
elementA.parentNode.appendChild(elementB)

// Append `elementA.firstchild` to `elementB`:
elementB.parentNode.appendChild(elementA.firstChild)

// Remove `elementA`:
elementA.parentNode.removeChild(elementA)

如何用另一个DOM元素替换？

2 个答案: