JavaScript の document.write、innerHTML、insertAdjacentHTML の違い

JavaScript の document.write、innerHTML など文字列出力の違い。

document.write は古いのか

ページ上にとりあえず何かを書き出すといえば document.write や document.writeln。

document.write("<b>あ</b>");
document.writeln("<b>い</b>");
document.writeln("<b>う</b>");

タグ（要素）も反映される。
違いは、writeが改行コードなし、writelnが改行コードあり。
よって上の例では「い」と「う」の間があいて表示される。

世間では古いとか推奨されていないとかで、新しい書き方として代わりにオススメされているのが innerHTML や insertAdjacentHTML で、他には textContent もある。
どれを使うのが良いのか。
何かを書き出せる点は同じだが、動作内容が異なるので用途に応じて使い分けることになる。

innerHTML、outerHTML は置き換え

innerHTML は指定した要素の内側のHTMLコードを取得したり、設定したりできる。
ここでは書き出すことをメインに話す。

最上
<div id="out">
上
<div id="in">中</div>
下
</div>
最下

<script>
document.getElementById('out').innerHTML = '<b>あ</b>';
</script>

innerHTML は書き出すというより置き換えを行う。
上の例では <div id="out"> 要素の内側をすべて置き換えている。
つまりもとの情報はなくなる。

最上
<div id="out">
上
<div id="in">中</div>
下
</div>
最下

<script>
document.getElementById('out').outerHTML = '<b>あ</b>';
</script>

outerHTML は指定した要素も含めて置き換える。
上の例では <div id="out"> も含めて置き換えられる。
innerHTMLもouterHTMLもタグ（要素）が有効で、反映される。

insertAdjacentHTML は挿入（追加）

insertAdjacentHTML は指定した要素の隣にテキスト（HTMLコード）を挿入できる。
insert は「挿入」、adjacent は「隣の」という意味。

最上
<div id="out">
上
<div id="in">中</div>
下
</div>
最下

<script>
document.getElementById('in').insertAdjacentHTML('afterbegin', '<b>あ</b>');
</script>

insertAdjacentHTML は挿入なので、元々書かれていた情報は残る。
もとのテキストが邪魔な場合は、要素の範囲内に何も書かなければ良い。
書き込める位置は4箇所あり、要素の開始直前は beforebegin、直後は afterbegin、要素の終了直前は beforeend、直後は afterend を指定する。
innerHTML同様タグ（要素）が有効で、反映される。
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML によると、innerHTMLより高速とのこと。
確かに置換よりは速そうだ。
置換する必要がなければ innerHTML より insertAdjacentHTML が良い。

textContent はテキストを置き換える

https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML を見ると、innerHTML はセキュリティ上のリスクがあり、代わりに node.textContent を使うことをオススメしている。

最上
<div id="out">
上
<div id="in">中</div>
下
</div>
最下

<script>
document.getElementById('out').textContent = '<b>あ</b>';
</script>

簡単に言うと、textContent は innerHTML のタグ（要素）無効版。
上の例では <b> 要素は実体参照（&lt;b&gt;）で書いたのと同じくテキストとして表示される。
テキストだけを置換するなら textContent が良い。
ただし、IE9未満は未実装。
https://developer.mozilla.org/ja/docs/Web/API/Node/textContent には古いIEでも使える innerText もあるが、現在非標準。
ただ、主要なブラウザの最新版なら実装されている。

イベント処理 へ続く。