JavaScript textContent, innerText, innerHTMLの違いと使い分け

textContent、innerText、およびinnerHTMLは、要素のコンテンツにアクセスしたり設定したりするためのプロパティです。

1. textContent: textContentメソッドは、要素に含まれる全てのテキストコンテンツを取得します。子要素に含まれるテキストも含まれます。要素のテキストコンテンツを取得または設定する際に使用できます。

Can you help me with my homework? -> 宿題を手伝ってくれますか？

let element = document.getElementById("example");
console.log(element.textContent); // 获取元素的文本内容
element.textContent = "这是新的文本内容"; // 设置元素的文本内容

1. innerTextは、要素の可視テキストコンテンツを返し、非表示の要素やスタイルのテキストを含みません。要素の可視テキストコンテンツを取得または設定するために使用できます。

明日は友達と映画を見に行きます。

友達と明日映画を見に行く予定です。

let element = document.getElementById("example");
console.log(element.innerText); // 获取元素的可见文本内容
element.innerText = "这是新的可见文本内容"; // 设置元素的可见文本内容

1. innerHTML：このプロパティは、要素のすべてのHTMLコンテンツ（タグとテキストを含む）を返します。要素のHTMLコンテンツを取得または設定するために使用できます。

Can you please explain that to me?

わかりやすく教えていただけますか？

let element = document.getElementById("example");
console.log(element.innerHTML); // 获取元素的HTML内容
element.innerHTML = "<p>这是新的HTML内容</p>"; // 设置元素的HTML内容

まとめ：textContentは要素のテキスト内容を取得および設定するために使用され、innerTextは要素の可視テキスト内容を取得および設定するために使用され、innerHTMLは要素のHTML内容を取得および設定するために使用されます。要素の内容を操作する際に適切なプロパティを選択してください。