如何替換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初學者手冊


更多瀏覽器教程: