如何替换一个DOM元素

给定一个DOM元素，你如何用另一个元素替换它？

假设你有一个DOM元素，你有它的一个引用（可能用 querySelector()).

要用另一个DOM元素替换它，你可以在第一个元素上调用replaceWith() 方法，将第二个元素作为参数传入。

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.replaceWith(el2)

由于Edge<17和IE11不支持它，如果你打算支持这些浏览器，你应该用Babel将其转译为ES5。

另一个解决方案是查找父元素并使用replaceChild() ，这种方法更古老，所有浏览器都支持。

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.parentNode.replaceChild(el2, el1)