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

要素を挿入するメソッドはJSネイティブでも同じ名前だった　

• 最近はマークやアイコンなどはSVGファイルにするのが一般的になりました。当サイトでも写真以外はSVGを使用しています。ただ、読み込む方法はいくつかあって、このサイトではJSを使ってSVGファイルのまま必要な箇所へ挿入しています。
  この挿入方法はこれまではjQueryのappendを使ってましたが、これもES6以降のネイティブ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);

  

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

  ”一連の Node または DOMString オブジェクトを Element の最後の子の後に挿入します。 DOMString オブジェクトは等価な Text ノードとして挿入されます。”

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

HTMLとしてパースし挿入するinsertAdjacentHTMLメソッド

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

  挿入する場所にも4か所ありました。詳しくは下のMDN解説ページをご覧ください。

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

  こんどは成功しました。汗；

複数要素へ挿入するには配列として読み込んで個別挿入

• 当サイトでは同種類のアイコンを複数要素へ挿入することが多いのでその場合は配列で扱ってやる必要があります。以下のような感じです。

  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 ]
  
  となります。