javascript insertAdjacentHTMLを使用してhtml要素を挿入する

javascript insertAdjacentHTMLを使用してhtml要素を挿入する

javascriptで、insertAdjacentHTMLを使用して、html要素を特定の場所に挿入するサンプルコードを記述してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

insertAdjacentHTML使い方

insertAdjacentHTMLを使用することで、特定の場所にhtmlを挿入するが可能です。

実行結果

第一引数の種類は、挿入する要素の場所となり、以下の通り4つ存在します。

beforebegin : 指定した要素のタグの上に挿入します。
afterbegin : 指定した要素のタグの中の初めに挿入します。
beforeend : 指定した要素のタグの中の最後に挿入します。
afterend : 指定した要素のタグの下に挿入します。

サンプルコード

以下は、
「実行」ボタンをクリックすると、指定した要素を追加して表示する
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

要素が追加されていることが確認できます。