HTML要素.textContent

// テキストを取得します。
var text = element.textContent;

// テキストを設定します。
element.textContent = "新しいテキスト";

sample_textContent.html

<p id="pilot"><strong>綾波レイ</strong> — <em>NERV</em></p>
<div id="profile">
	<span>碇シンジ</span>
	<span style="display: none;">初号機パイロット</span>
</div>
<p id="output"></p>

sample_textContent.js

// パターン1: HTMLタグを無視してテキストのみを取得する
var pilot = document.getElementById("pilot");
console.log(pilot.textContent); // 『綾波レイ — NERV』と出力されます（タグは含まれません）。

// パターン2: 非表示要素も含めてすべてのテキストを取得する
var profile = document.getElementById("profile");
console.log(profile.textContent); // 『碇シンジ初号機パイロット』と出力されます（非表示テキストも含まれます）。

// パターン3: テキストを設定する（HTMLタグは文字列として表示される）
var output = document.getElementById("output");
output.textContent = "エヴァンゲリオン初号機パイロット: <strong>碇シンジ</strong>";
// 画面には「エヴァンゲリオン初号機パイロット: <strong>碇シンジ</strong>」とそのまま表示されます。

// パターン4: ユーザー入力をそのまま表示する（XSS対策になる）
var userInput = '<img src=x onerror="alert(1)">';
output.textContent = userInput; // タグはエスケープされ、文字列として安全に表示されます。

サンプルページはこちら

『HTML要素.textContent』はHTML要素のテキスト内容を取得・設定するためのプロパティです。取得時には子要素のタグをすべて無視し、純粋なテキストのみを連結して返します。

設定時にHTMLタグを含む文字列を代入しても、タグはそのまま文字列として表示され、HTMLとして解釈されることはありません。この性質があるため、ユーザーが入力した値を画面に表示する場合には『HTML要素.innerHTML』よりも『HTML要素.textContent』の方が安全です。

HTMLを含む内容を動的に挿入したい場合は『HTML要素.innerHTML』を使用してください。