知らなきゃ絶対損するPCマル秘ワザ
『月,水,金』の週3回更新!(予定)

こんにちは、さち です。
最近、ユーザースクリプトを書く時に
jQuery をわざわざ読み込むのが嫌で
純粋な JavaScript だけで書くことが増えてきました。
ただ、1つ困ったことが……。
「要素」をウェブページに追加するときに
「insertBefore」はあるのに、「insertAfter」はない。
「appendChild」はあるのに、「prependChild」はない。
「insertBefore」「appendChild」だけで要素を追加しようとすると
位置によっては回りくどい記述が必要になり面倒です。
楽をするには、jQuery を使うか自力実装しかないのかと悩んでいたら
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(要素)」オブジェクトです。
そのため、「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」の方が遅いブラウザも一部あるみたいです。

| ホーム |