JavaScript ・ DOM操作
textContent
要素の文字を読み書きする
要素の中の文字を取得したり、別の文字に書き換えたりするプロパティです。タグを含めて書き換えるときは innerHTML を使います。
01
サンプルコード
HTML
1<p id="msg">ボタンを押してください</p>
2<button type="button" id="btn">押す</button>
CSS
1button {
2 padding: 6px 16px;
3 border: 1px solid #b68235;
4 border-radius: 4px;
5 background: #fff;
6 color: #7d5411;
7 font: inherit;
8 cursor: pointer;
9}
JS
1const msg = document.querySelector('#msg');
2let count = 0;
3
4document.querySelector('#btn').addEventListener('click', () => {
5 count++;
6 msg.textContent = `${count}回押しました`;
7 console.log(msg.textContent);
8});
02
実行結果
ブラウザでの表示ボタンを押すと文字が書き換わります
コンソール
- console.log() の出力がここに表示されます
03
解説
要素.textContent で要素の中の文字を取得でき、代入するとその文字に書き換わります。
代入した文字に <b> などのタグが含まれていても、タグとして解釈されずにそのまま文字として表示されます。利用者の入力を表示するときも安全です。
タグを含むHTMLとして書き換えたいときは innerHTML を使います。ただし、外部から来た文字をそのまま入れるのは危険なので注意します。
04
応用例・注意点
似たプロパティ
| プロパティ | 説明 |
|---|---|
textContent | 文字だけを読み書き（タグは解釈しない） |
innerHTML | HTMLとして読み書き（タグを解釈する） |
innerText | 画面に見えている文字（CSSの影響を受ける） |
value | 入力欄（input など）の値 |
入力した文字をそのまま表示する
input の value を読み取り、textContent で表示します。
HTML
1<input id="name" placeholder="お名前">
2<p>こんにちは、<span id="out">ゲスト</span>さん</p>
JS
1const out = document.querySelector('#out');
2document.querySelector('#name').addEventListener('input', (e) => {
3 out.textContent = e.target.value || 'ゲスト';
4});
注意点
- 01textContent に代入すると、要素の中にあった子要素はすべて消えます。
- 02入力欄の文字は textContent ではなく value で読み取ります。