JavaScript:「jQuery」なしで要素を簡単に指定位置に挿入する

この記事は約5分で読めます。

イメージ

こんにちは、さち です。

最近、ユーザースクリプトを書く時に jQuery をわざわざ読み込むのが嫌で、純粋な JavaScript だけで書くことが増えてきました。

ただ、1つ困ったことが……。

「要素」をウェブページに追加するときに、「insertBefore」はあるのに「insertAfter」はない。「appendChild」はあるのに「prependChild」はないんです。

「insertBefore」「appendChild」だけで要素を追加しようとすると、位置によっては回りくどい記述が必要になり面倒です。

自力実装するしかないのかと悩んでいたら、JavaScript にも jQuery に近い要素の追加方法があることを発見! 備忘録として記事にまとめておきます。

スポンサーリンク

「insertAdjacentElement」の使い方

JavaScript の「insertAdjacentElement」は、jQuery の「before」「after」「prepend」「append」と同じような機能です。

例を見てみましょう。

var target = document.getElementById('target');
var div = document.createElement('div');

// 「target」の直後に「div」を追加する
target.parentNode.insertBefore(div, target.nextSibling);

// 「insertAdjacentElement」を使って書くとこうなる
target.insertAdjacentElement('afterend', div);

「insertBefore」の場合

target の親要素に移動して、子要素となった target の次の要素を指定することで、target の直後に <div> を追加します。

回りくどい記述で、正直分かりにくいですよね。

「insertAdjacentElement」の場合

記述形式は非常にシンプルです。(メソッド名が長くて文字数はあまり差がないですが……)

「insertAdjacentElement」は、第1引数に「追加する位置」第2引数に「追加する要素」を渡します。「追加する位置」の指定は4種類から選びます。

target.insertAdjacentElement('beforebegin', div);// 直前に追加
target.insertAdjacentElement('afterbegin', div);// 子要素の先頭に追加
target.insertAdjacentElement('beforeend', div);// 子要素の末尾に追加
target.insertAdjacentElement('afterend', div);// 直後に追加

「begin(ビギン)」「end(エンド)」「before(ビフォー)」「after(アフター)」の4単語を組み合わせるだけなので、記述も簡単です。

「追加する位置」は言葉では分かりにくいので図にしてみました。
イメージ

基準となる要素(図のid="target")の先頭を「begin」,末尾を「end」として、それに「before(前)」または「after(後)」を付け加えます。一度理解すれば、位置をすぐ把握できると思います。

一応、サンプルも作ったので追加される位置を確認してみて下さい。

サンプル

日本人としては、「end」の反対は「start」としたいかもしれませんが「begin」です。間違えないように注意しましょう。

ちなみに、「adjacent(アジャセント)」は「近隣の」という意味。英語が苦手な私には聞き慣れない単語なのがつらいところ……。

その他の「insertAdjacent」

「insertAdjacentElement」は名前のとおり追加できる(第2引数に渡せる)のは「Element(要素)」オブジェクトです。そのため、第2引数に要素以外(テキストなど)を渡すとエラーが出ます

insertAdjacentHTML

「innerHTML」のように HTML形式 のテキストを渡したい時は、「insertAdjacentHTML」を使います。

var source = '<div>ハイパーファビュラス</div>';
target.insertAdjacentHTML('afterend', source);

名前の Element が HTML になっただけですし、追加位置の指定は「insertAdjacentElement」とまったく同じです。覚えやすいですね。

insertAdjacentText

テキストノードを追加したい時は「insertAdjacentText」です。

var text = 'アルティメットジャンボ';
target.insertAdjacentText('beforeend', text);

こちらも、名前が分かりやすいですし、追加位置の指定は「insertAdjacentElement」とまったく同じです。

各ブラウザの対応

Internet Explorer の独自実装から始まったメソッドですが、現在は、多くのブラウザが対応しています。「Can I use...」によると各ブラウザの対応状況は次のとおり。

表

懸念なのは Firefox の対応が「48」からということでしょうか。ちなみに、Firefox 48 が正式リリースされたのは2016年8月です。

2018年5月2日現在、近々 Firefox「60」が正式リリースされるので、「48」はかなり古いバージョンです。個人的には無視しちゃっても良い気はします。

仕組み上、「insetAdjacentHTML」は「innerHTML」より速いようですが、最近は「innerHTML」も高速化しているらしく、「insetAdjacentHTML」の方が遅いブラウザも一部あるみたいです。

コメント

タイトルとURLをコピーしました