HTML要素.innerHTML

// HTMLを取得します。
var html = element.innerHTML;

// HTMLを設定します。
element.innerHTML = "<p>新しいテキスト</p>";

sample_innerHTML.html

<div id="profile">
	<p><strong>岡部倫太郎</strong> — 未来ガジェット研究所</p>
</div>
<div id="member-list"></div>
<div id="output"></div>

sample_innerHTML.js

// パターン1: 既存のHTMLを取得する
var profile = document.getElementById("profile");
console.log(profile.innerHTML); // 『<p><strong>岡部倫太郎</strong> — 未来ガジェット研究所</p>』と出力されます。

// パターン2: HTMLを書き換える（タグがそのまま解釈される）
var members = ["牧瀬紅莉栖", "椎名まゆり", "橋田至", "阿万音鈴羽"];
var html = "<ul>";
for (var i = 0; i < members.length; i++) {
	html += "<li>" + members[i] + "</li>";
}
html += "</ul>";
var list = document.getElementById("member-list");
list.innerHTML = html;

// パターン3: 末尾にHTMLを追記する（+=で追記）
var output = document.getElementById("output");
output.innerHTML += "<p>ラボのメンバー: " + members.length + "名</p>";

// パターン4: 中身を空にする
output.innerHTML = "";

サンプルページはこちら

パターン2を実行すると、HTMLは以下のように変化します。

<!-- 実行前 -->
<div id="member-list"></div>

<!-- innerHTML設定後 -->
<div id="member-list">
	<ul><li>牧瀬紅莉栖</li><li>椎名まゆり</li><li>橋田至</li><li>阿万音鈴羽</li></ul>
</div>

<!-- innerHTML = "" 実行後 -->
<div id="output"></div>

『HTML要素.textContent』と異なり、HTMLタグがそのまま解釈されてHTML要素が生成されます。

ユーザーが入力した値を『HTML要素.innerHTML』でそのまま挿入すると、悪意のあるスクリプトが実行される恐れがあります（XSS: クロスサイトスクリプティング）。

// 危険な例
var userInput = '<img src=x onerror="alert(document.cookie)">';
element.innerHTML = userInput; // スクリプトが実行されてしまいます。

// ユーザー入力にはtextContentを使うのが安全です。
element.textContent = userInput; // 文字列としてそのまま表示されます。

『HTML要素.innerHTML』はHTML要素の中身をHTML文字列として取得・設定するプロパティです。取得時にはタグ構造を含む文字列がそのまま返され、設定時にはHTMLとして解釈されてDOMに反映されます。

HTML要素の中身を空にしたい場合は『HTML要素.innerHTML = ""』と指定するのが簡単です。

ユーザーの入力値を表示する場合は、セキュリティの観点から『HTML要素.textContent』の使用をおすすめします。『HTML要素.innerHTML』は信頼できるHTMLを動的に挿入する場合にのみ使用してください。

『HTML要素.innerHTML』はチュートリアル記事『HTML要素の中身を変えるinnerHTML』で、より詳しく解説しています。良ければご覧下さい。