Corredor

ウェブ、プログラミングの勉強メモ。

insertAdjacentHTML を今更知った

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

  • 作者: Heydon Pickering,太田良典,伊原力也,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2017/11/04
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

innerHTML += とか jQuery.append() とかやらなくていいのか…。

insertAdjacentHTML は、指定した要素の innerHTML を壊すことなく、要素の前後に別の要素を挿入できるネイティブの API。恥ずかしながら最近まで知らなかったが、「Can I Use」を見るとだいぶ前から使えたみたい。

サンプルコード

まずは以下のような div#target がある前提。

<div id="target">
  <p>Text</p>
</div>

次に、以下のように JavaScript コードを書く。

document.querySelector('#target').insertAdjacentHTML('afterbegin', '<p>Child text</p>');

すると、結果は以下のような HTML になる。

<div id="target">
  <p>Child text</p>
  <p>Text</p>
</div>

この時、元からあった <p>Text</p> にイベントを定義していたりした時に、そのイベント定義が消えたりしないところがミソ。

挿入場所の指定

要素を挿入できる場所は4ヶ所ある。第1引数に文字列で指定する。

<!-- 'beforebegin' -->
<element>
  <!-- 'afterbegin' -->
  <child>Text</child>
  <!-- 'beforeend' -->
</element>
<!-- 'afterend' -->

ウ~ンコレはベンリ!!

参考