【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
【ノードを子ノードの中の指定ノードの前に追加する(before)】
ChildNode オブジェクトの before メソッドはノードを子ノードの中の指定ノードの前に追加します。
書式：childnode.before(node[,node,...])
引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。 DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。
サンプル
ブラウザを立ち上げる
表示されたボタンをクリックすると、まず li タグの新しい要素ノードとテキストノードを作成し、テキストノードを要素ノードに子ノードの最後に追加します。そのあとで id 属性が menu02 の要素ノードの前に先に作成した要素ノードを追加しています。
【ノードを子ノードの中の指定ノードの前に追加する(insertBefore)】
Node オブジェクトの insertBefore メソッドはノードを子ノードの中の指定ノードの前に追加します。
書式：parentnode.insertBefore(node, childnode)
1 番目の引数に追加する Node オブジェクトを指定します。 2 番目の引数に指定した Node オブジェクトの前に追加されます。
サンプル
ブラウザを立ち上げる
表示されたボタンをクリックすると、まず li タグの新しい要素ノードとテキストノードを作成し、テキストノードを要素ノードに子ノードの最後に追加します。そのあとで id 属性が shopinfo の要素ノードを取得し、その子ノードの中の id 属性が menu02 の要素ノードの前に先に作成した要素ノードを追加しています
【ノードを子ノードの中の指定ノードの後に追加する(after)】
ChildNode オブジェクトの after メソッドはノードを子ノードの中の指定ノードの後に追加します。
書式：childnode.after(node[,node,...])
引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。 DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。
サンプル
ブラウザを立ち上げる
表示されたボタンをクリックすると、まず li タグの新しい要素ノードとテキストノードを作成し、テキストノードを要素ノードに子ノードの最後に追加します。そのあとで id 属性が menu02 の要素ノードの後に先に作成した要素ノードを追加しています。
【既存のノードを追加する】
ノードの追加は新しく作成したノードだけではなく、同じドキュメントに追加されている既存のノードを追加することができます。
その場合、現在の親ノードから対象のノードは削除されて新しく指定した親ノードの子ノードに追加されます。
サンプル
ブラウザをたちあげる
ボタンをクリックする。既存の li タグの要素ノードを別の ul タグの指定した子ノードの後に追加します。この時、もともと追加されていた ul タグの親ノードからは自動的に削除されます。
