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 プロパティを使用した方が安全です。