JavaScript で要素にテキストを追加する

1. JavaScript で appendChild を使って DOM 経由で既存のテキスト要素にテキストを追加する
2. JavaScript で textContent を使って DOM 経由で既存のテキスト要素にテキストを追加する
3. innerText を使用して DOM を介して JavaScript の既存のテキスト要素にテキストを追加する

DOM コンテンツの変更は、ブラウザーに関しては最も基本的なタスクです。DOM 全体を再レンダリングせずに、特定のアクションに基づいて DOM テキストを変更したい場合があります。この記事では、DOM を介して JavaScript の既存のテキスト要素にテキストを追加する方法を学習します。

JavaScript で appendChild を使って DOM 経由で既存のテキスト要素にテキストを追加する

DOM にはノードのリストが含まれています。各ノードには独自のデータが含まれています。JavaScript を使用すると、選択した親ノード内の既存の子ノードのリストに新しいノードインスタンスを追加できます。

構文：

appendChild(aChild);

appendChild() 関数は、新しく作成されたノードの入力パラメーター、または親ノードに追加する必要がある最も一般的な要素を受け取ります。appendChild()は、既存のノードを参照している場合、指定された子を現在の場所から新しい場所に移動します。

子が DocumentFragment である場合を除いて、追加された子（子）であるノードを返します。この場合、空の DocumentFragment が返されます。詳細については、appendChild メソッドのドキュメントをお読みください。

<p id="p">Hello </p>

<p id="p1">JavaScript Channel </p>

const text = document.createTextNode('Welcome to My channel');
const pNode = document.getElementById('p');
pNode.appendChild(text);

上記の例では、document.createTextNode("Welcome to My channel") を使用してテキストノードを作成し、それをドキュメントの p ノードに追加しました。上記のコードの出力は、以下のような DOM を作成します。

出力：

"Hello Welcome to My channel"

JavaScript で textContent を使って DOM 経由で既存のテキスト要素にテキストを追加する

これは、選択したノードとその子孫のテキストコンテンツを表すノードインターフェイスのプロパティです。JavaScript を使用すると、選択した親ノード内の子ノードから現在のテキストコンテンツに他のテキストを追加できます。

構文：

textContent = data;

textContent プロパティは、選択したノードのテキストコンテンツを更新します。ユーザーは、連結、更新など、必要に応じてテキストデータを変更できます。ノードがドキュメントまたはドキュメントタイプの場合、textContent は null を返します。textContent は、コメントと処理命令を除く他のノードタイプの各子ノードの textContent の連結を返します。ノードに子がない場合、これは空の文字列です。詳細については、textContent プロパティのドキュメントをお読みください。

const pNode = document.getElementById('p');
pNode.textContent += 'Welcome to My channel';

上記の例では、document.getElementById("p") を使用して段落ノードを取得し、段落ノードの既存のテキストコンテンツに Welcome to my channel を追加しました。上記のコードの出力は、次のように DOM を更新します。

出力：

"Hello Welcome to My channel"

innerText を使用して DOM を介して JavaScript の既存のテキスト要素にテキストを追加する

HTMLElement に属しています。このプロパティは、選択したノードとその子孫のレンダリングされたテキストコンテンツを表します。JavaScript を使用すると、選択した親ノード内の子ノードから現在のテキストコンテンツに他のテキストを追加できます。

構文：

const renderedText = htmlElement.innerText
htmlElement.innerText = string

innerText プロパティは、選択したノードのテキストコンテンツを更新します。ユーザーは、連結、更新など、必要に応じてテキストデータを変更できます。詳細については、innerText プロパティのドキュメントを参照してください。

const pNode = document.getElementById('p');
pNode.innerText += 'Welcome to My channel';

上記の例では、document.getElementById("p") を使用して段落ノードを取得し、段落ノードの既存のテキストコンテンツに Welcome to my channel を追加しました。上記のコードの出力は、次のように DOM を更新します。

出力：

"Hello Welcome to My channel"

textContent と innerText の唯一の違いは、textContent が script 要素と style 要素を含むすべての要素のコンテンツを取得することです。対照的に、innerText は人間が読める要素のみを表示します。textContent はノードのすべての要素を返します。対照的に、innerText はスタイルを意識しており、非表示要素からテキストを返しません。原則として、innerText はレンダリングされたテキストの外観を認識しますが、textContent は認識しません。