こんにちは、さち です。
最近、ユーザースクリプトを書く時に 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」の方が遅いブラウザも一部あるみたいです。
関連記事
もっと簡単な方法はこちら。
コメント