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

如果我在页面上有一个现有的元素a，并且我使用

document.createElement（…）

来创建元素B。elementA和elementB不是相同类型的标记（例如h1和iframe，即不能使用innerHTML），如何在不使用jQuery的情况下用elementB替换elementA

我尝试的内容（在之前插入新内容+删除旧内容）：

上面的操作不起作用，因为elementB作为elementA的子元素插入，然后删除elementA，然后删除这两个元素。

您可以使用

replaceChild（）方法替换 指定的节点与另一个节点连接

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild是替换oldChild的新节点。如果它已经存在于DOM中，则首先将其删除
• oldChild是要替换的现有子级
• replacedNode是被替换的节点。这是与oldChild相同的节点

var a=document.getElementById（'a'）
var h=document.createElement（'h1'）
h、 appendChild（document.createTextNode（'Title h1'））
a、 replaceChild（h，a.firstChild）

段落A

您可以使用

replaceChild（）方法替换 指定的节点与另一个节点连接

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild是替换oldChild的新节点。如果它已经存在于DOM中，则首先将其删除
• oldChild是要替换的现有子级
• replacedNode是被替换的节点。这是与oldChild相同的节点

var a=document.getElementById（'a'）
var h=document.createElement（'h1'）
h、 appendChild（document.createTextNode（'Title h1'））
a、 replaceChild（h，a.firstChild）

---

段落A

看起来您想用

elementB

替换父元素

elementA

，以便

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)

---

似乎要将父元素

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)

---

使用

elementA.parentElement

作为上下文，使用

elementA

而不是

elementA.firstChild

。您是否尝试过@Teemu谢谢！我还没有，我是这方面的初学者，现在肯定会看看。感谢Eduen的回答。尽管如此，它还是最通用的DOM操作方法之一，学会正确使用它是很好的。使用

elementA.parentElement

作为上下文，使用

elementA

而不是

elementA.firstChild

。你试过@Teemu谢谢！我还没有，我是这方面的初学者，现在肯定会看看。感谢Eduen的回答。尽管如此，它仍然是最通用的DOM操作方法之一，学习正确使用它是很好的。