JavaScriptで要素のテキスト・HTMLを操作する方法を完全解説！textContentとinnerHTML入門

1. JavaScriptのDOM操作でできること

1. JavaScriptのDOM操作でできること

JavaScriptのDOM操作とは、Webページに表示されているHTMLを、あとから変更する仕組みのことです。DOMは「ページの設計図」のような存在で、JavaScriptはその設計図を元に中身を書き換えます。

たとえば、掲示板の書き込みが増えたり、ボタンを押したら説明文が変わったりするのは、DOM操作が使われています。

今回はその中でも、「文字だけを変える方法」と「HTMLごと変える方法」の二つに注目します。

2. textContentとは何か

2. textContentとは何か

textContentは、要素の中に書かれている「文字だけ」を扱うための仕組みです。タグは関係なく、純粋な文字として読み書きします。

たとえるなら、紙に書かれた文章をそのまま書き直すイメージです。文字の装飾や構造は考えず、中の文章だけを変更します。

<p id="message">こんにちは</p>

const msg = document.getElementById("message");
console.log(msg.textContent);

こんにちは

このように、textContentを使うと、表示されている文字をそのまま取得できます。

3. textContentで文字を書き換える

3. textContentで文字を書き換える

textContentは、取得するだけでなく、文字を書き換えることもできます。これは「消して新しく書く」動作です。

const msg = document.getElementById("message");
msg.textContent = "こんばんは";

このコードを実行すると、画面の文字が「こんにちは」から「こんばんは」に変わります。

HTMLタグを気にせず、文字だけを安全に変更できるのが、textContentの大きな特徴です。

4. innerHTMLとは何か

4. innerHTMLとは何か

innerHTMLは、要素の中身を「HTMLとして」扱う方法です。文字だけでなく、タグも一緒に読み書きできます。

これは、箱の中にある部品を丸ごと入れ替えるようなイメージです。文章だけでなく、見た目の構造も変更できます。

<div id="box">
    <p>文章です</p>
</div>

const box = document.getElementById("box");
console.log(box.innerHTML);

<p>文章です</p>

5. innerHTMLでHTMLを変更する

5. innerHTMLでHTMLを変更する

innerHTMLを使うと、新しいHTMLをまとめて書き換えられます。文章の途中に強調表示を入れたい場合などに使われます。

const box = document.getElementById("box");
box.innerHTML = "<p><strong>重要</strong>なお知らせです</p>";

このように、タグを含んだHTMLをそのまま代入できます。ただし、HTMLとして解釈されるため、使い方には注意が必要です。

6. textContentとinnerHTMLの違い

6. textContentとinnerHTMLの違い

textContentは文字専用、innerHTMLはHTML全体を扱います。初心者のうちは、まずtextContentを使うのが安全です。

innerHTMLは便利ですが、間違ったHTMLを書くと表示が崩れることがあります。そのため、役割を理解して使い分けることが大切です。

「文字だけ変えたいならtextContent」「見た目ごと変えたいならinnerHTML」と覚えると混乱しにくくなります。

7. テキスト操作が使われる身近な例

7. テキスト操作が使われる身近な例

ログイン後に名前を表示する、エラーメッセージを出す、説明文を切り替えるなど、日常的なWebサイトの多くでテキスト操作が使われています。

これらはすべて、JavaScriptのDOM操作で文字やHTMLを変更して実現されています。

今回学んだtextContentとinnerHTMLを理解することで、Webページが動いて見える仕組みが少しずつわかってきます。