知らなきゃ絶対損するPCマル秘ワザ

daredemopc.blog.fc2.com

「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（要素）」オブジェクトです。
そのため、「insertAdjacentElement」にテキストを渡してもエラーが出ます。

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

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

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

また、テキストノードを追加したい時は「insertAdjacentText」です。
こちらも分かりやすい名前ですね。

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

各ブラウザの対応

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



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

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

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