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

JavaScriptのinsertAdjacentElement()で指定した位置に要素を挿入する方法

JavaScriptで既存の要素を指定位置に挿入するには？

JavaScriptには、すでにDOM上に存在する要素を任意の位置に挿入するためのinsertAdjacentElement()メソッドが用意されています。同じタグ名の要素が複数存在する場合は、getElementsByTagName()などで取得した NodeList を配列と同様にインデックスで操作することで、目的の要素を正確に選択できます。

構文

node.insertAdjacentElement(position, element);

positionに指定できる4つの値

  • "beforebegin"：対象ノードの直前（外側）に挿入
  • "afterbegin"：対象ノードの内部の先頭に挿入
  • "beforeend"：対象ノードの内部の末尾に挿入
  • "afterend"：対象ノードの直後（外側）に挿入

例1：span1を見出しの直後に移動する

次の例では、span1・span2・h2見出しという3つの要素が並んでいます。ここでinsertAdjacentElement()を使い、第1引数に"afterend"を指定することで、要素span1を見出しの直後に移動させています。実行結果では、span1が見出しの下に表示されているのが確認できます。

<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
   var s = document.getElementsByTagName("span")[0];
   var h = document.getElementById("H2");
   h.insertAdjacentElement("afterend", s);
</script>
</body>
</html>

実行結果

My span2
My Header
My span1

例2：span2を見出しの直後に移動する

続く例も同じくspan1・span2・h2見出しの3つの要素から構成されています。今度はインデックス「1」を指定してspan2を取得し、"afterend"の位置に挿入しています。このように、同名の要素が複数ある場合は配列と同じ要領でインデックス経由でアクセスするのがポイントです。

<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
   var s = document.getElementsByTagName("span")[1];
   var h = document.getElementById("H2");
   h.insertAdjacentElement("afterend", s);
</script>
</body>
</html>

実行結果

My span1
My Header
My span2

まとめ

insertAdjacentElement()は、既存の要素をページの別の場所へ移動させる際にも活用できる便利なメソッドです。なお、挿入したい位置を細かく制御したい場合は、"beforebegin"や"beforeend"などの4種類のposition値を使い分けることで、柔軟なDOM操作が可能になります。

  1. JavaScriptで親要素にアクセスする方法【parentNodeプロパティの使い方】

    JavaScriptでDOM操作を行っていると、ある要素の親要素にアクセスしたい場面によく出会います。そんなときに活躍するのがparentNodeプロパティです。このプロパティは、対象ノードの直接の親ノードを返します。 本記事では、クリックイベントとparentNodeプロパティを組み合わせて、クリックされた子要素の親要素を取得し、そのクラス名を画面に表示するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&qu

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in