テキストと HTML コンテンツを変更する
textContent と innerHTML でコンテンツを更新します。
「テキストと HTML コンテンツを変更する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
テキストの読み取りと書き込み
要素に表示する内容を変更するには、テキストまたは HTML を設定します。マークアップが必要かどうか、またデータをどの程度信頼できるかによって、適切な方法が決まります。
textContent
textContent は要素の生のテキストを取得または設定します。設定するとすべての子要素が 1 つのテキストノードに置き換えられ、入力はプレーンテキストとして扱われます。
const el = document.querySelector("#status");
el.textContent = "Saved!";textContent はマークアップをエスケープする
プレーンテキストとして扱われるため、文字列内の HTML は解析されず、そのまま表示されます。これにより、インジェクションに対して安全です。
el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>innerHTML
innerHTML は要素内の HTML マークアップを取得または設定します。設定すると文字列が HTML として解析され、実際のノードが構築されます。
const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";innerHTML はすべてを置き換える
innerHTML に代入すると既存の子要素が破棄され、新しいマークアップからサブツリーが再構築されます。
box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";XSS の危険性
信頼できないユーザー入力を innerHTML に決して入れないでください。悪意のある文字列によってスクリプトやイベントハンドラーが挿入される可能性があります。これは XSS と呼ばれる脆弱性です。
const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;innerText
innerText は textContent と似ていますが、スタイルを認識します。描画されたテキストを反映し、非表示の要素は無視します。
console.log(el.innerText); // visible text onlytextContent と innerText の比較
textContent は非表示の内容を含むすべてのテキストを返します。また、レイアウト処理を発生させないため高速です。innerText はレイアウトを認識するため、より低速です。
el.textContent; // all text, even display:none
el.innerText; // only what is visually renderedテキストを安全に追加する
既存のノードを消去せずにテキストを追加するには、textContent を上書きするのではなく、テキストノードを構築するか insertAdjacentText を使います。
el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");再解析せずに HTML を挿入する
insertAdjacentHTML は要素全体を再解析せずに、指定した位置へマークアップを追加します。そのため、innerHTML を再構築するより効率的です。
box.insertAdjacentHTML("beforeend", "<li>New item</li>");適切なプロパティを選ぶ
プレーンテキストには textContent（安全なデフォルト）を使い、innerHTML は信頼できるマークアップに限って使います。描画済みの表示テキストが必要な場合は innerText を使います。
簡単な確認
安全な方法を選びましょう。
まとめ
textContent はプレーンテキストをエスケープして設定するため、安全なデフォルトです。innerHTML はマークアップを解析しますが、信頼できない入力では XSS の危険があります。innerText は表示されている描画済みテキストだけを反映します。コンテンツを追加する場合は、要素全体を上書きするより insertAdjacentHTML/insertAdjacentText を優先してください。
よくある質問
「テキストと HTML コンテンツを変更する」レッスンは無料ですか？
はい。「テキストと HTML コンテンツを変更する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「テキストと HTML コンテンツを変更する」で何を学びますか？
textContent と innerHTML でコンテンツを更新します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「テキストと HTML コンテンツを変更する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テキストと HTML コンテンツを変更する
- 要素を作成して挿入する
- 属性とクラスを変更する
- ノードを削除・置換する