HTML要素.innerHTML

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

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

<div id="profile">
	<p><strong>user_a</strong> — org_a</p>
</div>
<div id="member-list"></div>
<div id="output"></div>

同じ処理は次のようにも書けます。

// パターン1: 既存のHTMLを取得する
var profile = document.getElementById("profile");
console.log(profile.innerHTML);

// パターン2: HTMLを書き換える（タグがそのまま解釈される）
var members = ["item_a", "item_b", "item_c", "item_d"];
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>item_a</li><li>item_b</li><li>item_c</li><li>item_d</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』で、より詳しく解説しています。良ければご覧下さい。