insertAdjacentHTMLの使用方法

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

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

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

次に例を示します。

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

document.querySelector(’#container’).insertAdjacentHTML(‘afterend’, item)

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

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

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

  • beforebegin要素の前
  • afterbegin要素の最初の子の前
  • beforeend要素の最後の子の後
  • afterend要素の後

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

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

私の無料ダウンロードJavaScriptビギナーズハンドブック


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