/

如何替換 DOM 元素

如何替換 DOM 元素

當我們有一個 DOM 元素時，我們該如何用另一個元素來替換它呢？

假設我們有一個 DOM 元素並且已經有了對它的引用（可能是使用 querySelector() 獲取的）。

要將其替換為另一個 DOM 元素，可以在第一個元素上調用 replaceWith() 方法，並將第二個元素作為參數傳遞：

1
2
3
4
const el1 = document.querySelector(/\* ... \*/)
const el2 = document.querySelector(/\* ... \*/)

el1.replaceWith(el2)

由於 Edge < 17 和 IE11 不支援此方法，如果你計劃支援這些瀏覽器，則應使用 Babel 將其轉換為 ES5。

另一種解決方案是查找父元素並使用 replaceChild() 方法，該方法更早並且被所有瀏覽器支援：

1
2
3
4
const el1 = document.querySelector(/\* ... \*/)
const el2 = document.querySelector(/\* ... \*/)

el1.parentNode.replaceChild(el2, el1)

tags: [“JavaScript”, “DOM”, “replace element”]