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