當我們有一個 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)