JavaScript: innerHTML の使い方

innerHTML プロパティは、要素内のHTMLコード(要素内容)を表し、 要素内容を取得・設定するために使います。

使い方


// 取得
var content = elem.innerHTML;

// 設定
elem.innerHTML = content

サンプルコード

次のコードは、id="hoge" のdiv 要素の innerHTML を取得して表示します。


<div id='hoge'><b>JavaScript</b></div>

<script>

    var elem = document.getElementById('hoge');
    console.log(elem.innerHTML); // <b>JavaScript</b>
    console.log(elem.textContent); // JavaScript
    
</script>

innerHTMLは、HTMLコード(要素内容)を取得しますから、 タグを含めて取得します。(今回の場合は b タグ)

タグを含めずに、テキスト内容のみを取得・設定したい場合は textContent プロパティを使用します。

セキュリティ上の注意点

innerHTML は要素内容を設定する手段としてよく使われていますが、 セキュリティ上の危険性も認識しておいてください。

HTML5 での innerHTML は、script タグは実行しないようになっています。 ですから、直接 script タグを使ってJavaScript のコードが実行されることはありません。

しかし、script タグを使わずに、JavaScript のコードが挿入された場合、実行されてしまう危険性があります。

ですから、プレーンテキストを設定する場合は、innerHTML プロパティではなく、 textContent プロパティを使用した方が安全です。