insertAdjacentHTML 是一個非常酷的 DOM 方法，我們可以在任何 DOM 元素上調用它來向頁面添加新的內容。

這是一種很好且靈活的插入新內容的方式。

該方法在一個元素上被調用，並接受兩個參數：位置和包含 HTML 的字符串。

以下是一個示例：

const item = `<div>
 test
 </div>
`

document.querySelector('#container').insertAdjacentHTML('afterend', item)

請注意這裡的 afterend 字符串。

它表示我們要將 HTML 添加到容器中的位置。

我們有四個可能的位置：

  • beforebegin：在元素之前
  • afterbegin：在元素的第一個子元素之前
  • beforeend：在元素的最後一個子元素之後
  • afterend：在元素之後

以下是我們如何向列表添加新項目的示例：

document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')