JS--子ノードの追加

ノードを子ノードの中の先頭または最後に追加

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【ノードを子ノードの先頭に追加する】
ParentNode オブジェクトの prepend メソッドはノードを子ノードの先頭に追加します。

書式：parentnode.prepend(node[,node,...])

引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。

DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。

例えば
追加するノードとして div タグの要素ノードを新しく作成し、追加先として id 属性が xxx のノードの子ノードの先頭に追加するには次のように記述します。

let parentnode = document.getElementById('xxx');//追加先ノード
let child = document.createElement('div');//追加するノード

parentnode.prepend(child);子ノードの先頭に追加するサンプル

ブラウザを立ち上げる

クリックする。 li タグの新しい要素ノードを作成したあと prepend メソッドの引数に文字列を指定して実行し、作成した要素ノードにテキストノードを追加します。そのあとで追加先として id 属性が shopinfo の要素ノードを取得し、先に作成した要素ノードを追加先ノードの子ノードの先頭に追加しています。

【ノードを子ノードの最後に追加する(append)】
ParentNode オブジェクトの append メソッドはノードを子ノードの最後に追加します。

書式：parentnode.append(node[,node,...])

引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。 DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。

サンプル

ブラウザを立ち上げる

ボタンをクリックする

【ノードを子ノードの最後に追加する(appendChild)】
Node オブジェクトの appendChild メソッドはノードを子ノードの最後に追加します。

書式：parentnode.appendChild(node)

引数には追加する Node オブジェクトを指定します。( appendChild メソッドでは同時に一つしか追加できません)。
サンプル

ブラウザを立ち上げる

ボタンをクリック

li タグの新しい要素ノードを作成したあと appendChild メソッドの引数に別途作成したテキストノードを指定して実行し、作成した要素ノードにテキストノードを追加します。そのあとで追加先として id 属性が shopinfo の要素ノードを取得し、先に作成した要素ノードを追加先ノードの子ノードの最後に追加しています。

【既存のノードを追加する】
ノードの追加は新しく作成したノードだけではなく、同じドキュメントに追加されている既存のノードを追加することができます。その場合、現在の親ノードから対象のノードは削除されて新しく指定した親ノードの子ノードに追加されます。

サンプル

ブラウザを立ち上げる

ボタンを押す

既存の li タグの要素ノードを別の ul タグの親ノードに追加します。この時、もともと追加されていた ul タグの親ノードからは自動的に削除されます。