insertAdjacentHTMLの使用方法

insertAdjacentHTMLこれは、ページに新しいコンテンツを追加するために任意のDOM要素で呼び出すことができる非常に優れたDOMメソッドです。

これは、新しいコンテンツを挿入するための優れた柔軟な方法です。

このメソッドは要素に対して呼び出され、位置とHTMLを含む文字列の2つのパラメーターを受け入れます。

次に例を示します。

const item = `<div>
    test
  </div>
`
document.querySelector(’#container’).insertAdjacentHTML(‘afterend’, item)

に注意してくださいafterendストリング。

これは、HTMLをコンテナに追加する位置を表します。

4つの可能なポジションがあります：

リストに新しいアイテムを追加する方法は次のとおりです。

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

その他のブラウザチュートリアル：