如何替换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)

免费下载我的JavaScript初学者手册


更多浏览器教程: