javascript ノードを移動させる

javascript ノードを移動させる

javascriptで、appendChildを使用して、ノードを移動させるサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

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

appendChild使い方

appendChildを使用すると、ノードを移動させることが可能です。

指定したノードを、div要素の最後尾に移動させてみます。

実行結果をみると、指定したノードが最後尾に移動されて表示されていることが確認できます。

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

parentNodeで親要素を取得して実行しても同じ結果となります。

また、以下のコードを、

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

サンプルコード

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

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

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