javascript insertBeforeでノードを追加する

javascript insertBeforeでノードを追加する

javascriptで、insertBeforeを使用して、ノードを追加するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

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

insertBefore使い方

insertBeforeを使用すると、ノードを追加することが可能です。

insertBefore使い方

実行結果をみると、指定したノード(id=one)の前に要素が追加されて表示されていることが確認できます。

insertBeforeの第2引数をnullに指定すると、最後尾にノードが追加されます。

また、以下のコードを、

document.getElementByIdの省略して、簡潔に記述することもできます。

サンプルコード

以下は、
「ノードを追加」ボタンをクリックして、ノードを追加するだけの
サンプルコードとなります。

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

ノードが追加されていることが確認できます。