このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

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

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows: PCの「IPアドレス」「MACアドレス」を確認する方法 (07/16)
  • LINEモバイル:ソフトバンク回線に変更してみた (07/13)
  • JavaScript:正規表現のメソッドがややこしい! 違いを学ぶ (07/11)
  • Firefox:ダイアログなしでリンク先を保存する(Alt + クリック) (07/09)
  • ツイッター:「不適切な内容が含まれている」は自分だけで直せる (07/06)
  • 管理人より
    2300万アクセス突破しました。ありがとうございます。

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

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    最近、ユーザースクリプトを書く時に
    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」の方が遅いブラウザも一部あるみたいです。









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2018 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ