JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのinsertBefore()メソッドで既存の子ノードの前に新しいノードを挿入する方法

JavaScriptには、ある子ノードの前に別のノードを子として挿入するためのinsertBefore()メソッドが用意されています。このメソッドを使うと、2つのリスト間で要素を自由に移動させたり、任意の位置にノードを挿入したりすることができます。

insertBefore()メソッドの構文

node.insertBefore(newnode, existingnode);

第1引数には挿入したい新しいノード（newnode）を、第2引数には基準となる既存の子ノード（existingnode）を指定します。新しいノードは、指定した既存ノードの直前に挿入されます。

例1：リスト間で要素を入れ替える

次の例では、2つのリストが用意されており、insertBefore()メソッドを使ってリスト間で要素を移動させています。リスト内の複数の要素にアクセスするには、インデックス番号を使用します。

<html>
<body>
<ul id="List1"> <li>Tesla </li><li>Solarcity </li> </ul>
<ul id="List2"> <li>Google </li> <li>Drupal </li> </ul>
<script>
    var node = document.getElementById("List2").firstChild;
    var list = document.getElementById("List1");
    list.insertBefore(node, list.childNodes[1]);
</script>
</body>
</html>

このコードでは、まず「List2」の最初の子要素（Google）を取得し、「List1」の2番目の子ノード（インデックス1：Solarcity）の前に挿入しています。

実行結果

Tesla
Google
Solarcity

Drupal

例2：リストの先頭に要素を挿入する

次に、挿入位置として先頭（インデックス0）を指定した例を見てみましょう。

<html>
<body>
<ul id="List1"> <li>Tesla </li> <li>Solarcity </li> </ul>
<ul id="List2"> <li>Google </li> <li>Drupal </li> </ul>
<script>
    var node = document.getElementById("List2").firstChild;
    var list = document.getElementById("List1");
    list.insertBefore(node, list.childNodes[0]);
</script>
</body>
</html>

今回は「List1」の1番目の子ノード（インデックス0：Tesla）の前に「Google」を挿入しているため、Googleがリストの先頭に移動します。

実行結果

Google
Tesla
Solarcity

Drupal

まとめ

insertBefore()メソッドを使えば、DOMツリー内の任意の位置にノードを挿入できます。第2引数にnullを指定すると、リストの末尾に追加される点も覚えておくと便利です。リストの並べ替えや動的なコンテンツ生成など、さまざまな場面で活用できる基本的なDOM操作メソッドです。

  1. 【JavaScript入門】文字列を繰り返す方法 – Array()とjoin()を組み合わせた実装例

    JavaScriptである文字列を指定した回数だけ繰り返して表示したい場合、Array()コンストラクタとjoin()メソッドを組み合わせることで簡単に実現できます。 仕組みの解説 new Array(value + 1)は、要素数が「value + 1」個の空の配列を生成します。この空の配列に対してjoin(this)を実行すると、各要素の間に区切り文字として自分自身（対象の文字列）が挿入されます。要素が value + 1 個あれば間は value 個できるため、結果的に元の文字列が value 回繰り返されるという仕組みです。 サンプルコード 以下に実際のコード例を示します。 <!

  2. JavaScriptでDOMノードのすべての子要素を一括削除する方法

    JavaScriptでDOMノードからすべての子要素を削除したい場合は、親要素のinnerHTMLに空文字列（''）を設定するのが最もシンプルで手軽な方法です。これにより、その要素の中身が丸ごとクリアされます。 サンプルコード 実際に動作するコードを見てみましょう。ボタンをクリックすると、赤い枠のボックス内の子要素がすべて削除される仕組みです。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="U