web-dev-qa-db-ja.com

TextNodeまたはtextContent？

TextContentを直接設定するよりも、TextNodeを作成してHTML要素に追加することの利点は何ですか？

スパンがあるとしましょう。

var span = document.getElementById('my-span');

そして、そのテキストを変更したいと思います。使用する利点は何ですか：

var my_text = document.createTextNode('Hello!');
span.appendChild(my_text);

以上

span.textContent = 'hello';

javascriptcreatetextnode
23
Flyaku

それは実際には利点の問題ではありませんが、必要に応じて適切に使用する必要があります。

基本的な違いは次のとおりです。

  • createTextNode()はメソッドであり、その名前が示すとおりに機能します。要素を作成します...次に、それを使用して何かを行う必要があります（例のように、子として追加します）。
    したがって、新しい要素を作成してどこかに配置する場合に便利です
  • textContentは、取得または設定できるプロパティであり、一意のステートメントのみが含まれます。
    したがって、既存の要素のコンテンツのみを変更したい場合に便利です

今あなたの質問の正確なケースでは、あなたはあなたがしたいと言いました変更要素のテキスト...
より明確にするために、次のHTML要素があるとします。

<span>Original text</span>

最初のソリューションを使用している場合：

var my_text = document.createTextNode('Hello!');
span.appendChild(my_text);

その後、次のようになります。

<span>Original textHello!</span>

あなたが追加あなたのtextNodeだからです。

したがって、2番目のソリューションを使用する必要があります。

28
cFreed