Studio
Happyvalley

ネイティブJSで
要素を自在に
追加する

image: ネイティブJSで要素を自在に追加する
Toplabo
Append Objects

jQueryのAppendをネイティブJSで実装する

2021/12/31

解説

要素を挿入するメソッドはJSネイティブでも同じ名前だった 
  • 最近はマークやアイコンなどはSVGファイルにするのが一般的になりました。当サイトでも写真以外はSVGを使用しています。ただ、読み込む方法はいくつかあって、このサイトではJSを使ってSVGファイルのまま必要な箇所へ挿入しています。
    この挿入方法はこれまではjQueryのappendを使ってましたが、これもネイティブJSでやってみようと試してみました。
    調べてみると「append」とjqueryと同じ名前で関数がありました。早速試してみました。

    Appendを使ったサンプル

    コードとブラウザでのプレビューSS。

    const i={svg: '<svg role="img" aria-label="スタジオ・ハッピィバリーのシンボルマーク" fill="#3fa9f5" width=27 height=28 id="lay_1" data-name="lay_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 256"><defs><style></style></defs><g id="lay_2" data-name="lay_2"><g id="lay_1-2" data-name="lay_1-2"><polygon class="cls-1" points="160 0 160 136 120.01 160 80 136 79.96 92 39.86 116 0.01 92 0 184 120.01 256 240 184 240 44 160 0"/><polygon class="cls-1" points="80 0 40 24 80 48 80 0"/></g></g></svg>'};
    let tgt= document.querySelector('#target');
    tgt.append( i.svg);
    https://studio-happyvalley.com/wp/wp-content/uploads/fig1-2.png

    な、なんですかこれは!
    画像じゃなくてテキストじゃないか。悲しいことにSVGファイルがテキストのまま挿入されちゃいました。
    jqueryのtext()とhtml()の違いみたいな感じでしょうか。
    MDNの解説をよく読んだらこんなこと書いてありました。

    ”一連の Node または DOMString オブジェクトを Element の最後の子の後に挿入します。 DOMString オブジェクトは等価な Text ノードとして挿入されます。”
    MDN | 開発者向けのウェブ技術/ Web API / Element / Element.append() より


    なんと、テキストで挿入されるとかいてある。よく読めってかんじですが・・・(汗

HTMLとしてパースし挿入するinsertAdjacentHTMLメソッド
  • htmlとしてパースして挿入する関数はないのかとMDNを調べたら、ありました。
    insertAdjacentHTMLというメソッドです。
    これの使い方はappendとはちょっと違っていて挿入したい要素は第二引数へ、第一引数には挿入する場所を指定するようになっています。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig2-1.png挿入する場所にも4か所ありました。詳しくは下のMDN解説ページをご覧ください。

    上記の構文に従って試してみました。これです。↓

    https://studio-happyvalley.com/wp/wp-content/uploads/linkfig4.pngこんどは成功しました。汗;
複数要素へ挿入するには配列として読み込んで個別挿入
  • 当サイトでは同種類のアイコンを複数要素へ挿入することが多いのでその場合は配列で扱ってやる必要があります。以下のような感じです。

    if(info_clover)setSvgs(info_clover, i.svg.bubbleClover);
    function setSvgs(items,svg){
    	items.forEach(function(item){
    		item.insertAdjacentHTML('afterbegin', svg);
    	});
    }

    自在に追加するには下記のオプションを第一引数へ記述します。

    [ Origin ]: 基本要素, [ Add ]: 追加要素

    'beforebegin':element の直前に挿入
    [ Add ] [ Origin ]

    'afterbegin':element 内部の、最初の子要素の前に挿入
    [ [ Add ] Origin ]

    'beforeend':element 内部の、最後の子要素の後に挿入
    [ Origin [ Add ] ]

    'afterend':element の直後に挿入
    [ Origin] [ Add ]

    となります。

https://studio-happyvalley.com/wp/wp-content/uploads/linkfig1.png

ES2015のappend使用サンプル
appendを使った失敗例

https://studio-happyvalley.com/wp/wp-content/uploads/linkfig2.png

ES2015のinsertAdjacentHTML使用サンプル
insertAdjacentHTMLを使った成功作!

https://studio-happyvalley.com/wp/wp-content/uploads/linkfig3.png

複数の要素へ追加サンプル
複数に対応したプログラム!

『ネイティブJSで要素を自在に追加する』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら