createTextNodeとtextContentの違い

Question

入力値をもとにHTML文字列を組み立てる場合には、createElement/createTextNodeメソッドを使用すべきであり、textContentプロパティは使えません。

このような記述が教科書にあったのですが、よく分かりません。というのも、

<form>
			<div>
				<label for="name">サイト名: </label><br>
				<input id="name" name="name" type="text" size="30">
			</div>
			<div>
				<label for="url">URL: </label><br>
				<input id="url" name="url" type="url" size="50">
			</div>
			<div>
				<input id="btn" type="button" value="追加">
			</div>
		</form>
        <div id="list"></div>

document.addEventListener("DOMContentLoaded", function() {
		document.getElementById("btn").addEventListener("click", function() {
				let name = document.getElementById("name");
				let url = document.getElementById("url");
				
				let anchor = document.createElement("a");
				anchor.href = url.value;
				let text = document.createTextNode(name.value);
				anchor.appendChild(text);
				let list = document.getElementById("list");
				list.appendChild(anchor);
			}, false);
	}, false);

このようなコードを実行させ、例えば、サイト名に<h1>test</h1>と入力すると、追加ボタンの下に<h1>text</h1>という文字列がそのまま出力されます。

しかし、このjavascriptのコードは、

document.addEventListener("DOMContentLoaded", function() {
		document.getElementById("btn").addEventListener("click", function() {
				let name = document.getElementById("name");
				let url = document.getElementById("url");
				
				let anchor = document.createElement("a");
				anchor.href = url.value;
             //以下、変更箇
				anchor.textContent = name.value;      
				list.appendChild(anchor);                
		}, false);
	}, false);

のようにもかけると思うのですが、どうでしょうか。
このような記述だと何か問題はありますでしょうか。

Comments

[退会済みユーザー]

では <h1>hoge<span>fuga</span>hoge</h1> これを dom を使ってどうやって生成する？

Answer 1

nodeを意識した構造の場合createTextNodeとtextContentでは明らかに挙動が違います

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var hoge=document.querySelector('#hoge');
  hoge.textContent+="xxx";
  hoge.appendChild(document.createTextNode("yyy"));
  var n=hoge.firstChild;
  while(n){
    console.log(n.nodeName+":"+(n.nodeValue||"").replace(/\n/g,"\n"));
    n=n.nextSibling;
  }
});
</script>
<pre id="hoge">aaa
bbb
ccc</pre>

• textContentでは文字列を連結したデータが戻るだけ
• createTextNodeをアペンドした場合別Nodeが挿入されていることがわかります

Comments

[yambejp]

だからといってtextContentが問題あるわけではありません
（あくまでもやっていることや結果が違うというだけ）
なんならinnerHTMLやinsertAdjacentHTMLでもよいでしょう

[salah0615]

なるほど、ありがとうございます。

Answer 2

Node#textContent

• textContent - DOM Standard 日本語訳

対象が要素ノードであるなら、要素の子ノード全てを削除してから、テキストノードを挿入します。

<p id="sample">foo<span>bar</span>piyo</p>
<script>
'use strict';
const element = document.getElementById('sample');
element.textContent = 'replaced!';
console.log(element.outerHTML); // <p id="sample">replaced!</p>
</script>

Document#createTextNode

• createTextNode - DOM Standard 日本語訳

「テキストノード」を生成します。
要素ノードの子ノードがテキストノード単体ではなかった場合の挙動が textContent とは違いますが、それは表面的なもので、ノード単位で扱えるのがメリットです。

<p id="sample"></p>
<script>
'use strict';
const element = document.getElementById('sample');
element.appendChild(document.createTextNode('foo'));
element.appendChild(document.createTextNode('bar'));
element.appendChild(document.createTextNode('piyo'));

console.log(element.outerHTML);          // "<p id="sample">foobarpiyo</p>"
console.log(element.textContent);        // "foobarpiyo"
console.log(element.childNodes[0].data); // "foo"
console.log(element.childNodes[1].data); // "bar"
console.log(element.childNodes[2].data); // "piyo"
</script>

Re: salah0615 さん

Comments

[salah0615]

はっきりとした違いがわかりました。ありがとうございます。

Answer 3

https://developer.mozilla.org/ja/docs/Web/API/Node/textContent

Node.textContent プロパティは、ノードおよびその子孫のテキスト内容を表します。

Nodeを追加したり操作したりする機能ではなく、あるノードの子孫要素まで含めて読み書きする機能です。textContent自体が比較的あとに作られた機能であり、単純なNodeの操作を行うための機能ではなかったはずです。（innerHTMLの親戚）

たとえば<a href="">abc<b>def</b></a> であるとき、a要素のtextContentはabcdefになりますが、textContentを上書きすると内部のb要素が消えるなどの作用が働きます。

とはいえ、TextNodeを作ってそれをappendChildして...というのも面倒なので、textContentは便利に使えばいいと思います。（ちなみにcreateTextNodeなどのほうが若干動作が高速である可能性はあります）

余談：
VueやReactなどが使われることが増えて、そもそもDOMのテキストを直接操作する機会自体が減ってきている印象があります。

Comments

[salah0615]

textContentができた経緯まで教えていただきありがとうございます。