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

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト