はじめに
DOM操作の学習をしている際に、.appendの引数に渡せるものとしてオブジェクトとテキストが紹介されていました。
想定通りに動くのでいいのですが、なぜテキストはこんなにシンプルに渡せるようになっているのかが疑問に思っていました。
結論
先に結論としては、テキストで渡したとしても、内部でTextオブジェクトを作成して追加しているため、オブジェクトを引数に渡しているのと同じことだからでした。
確認
index.html
<body>
<p>パラグラフ</p>
<script src="app.js"></script>
</body>
app.js
const span = document.createElement('span');
span.innerText = 'span';
const p = document.querySelector('p');
p.append(span);
p.append('テキスト');
span要素のオブジェクトを.appendに渡すと、以下のようにブラウザに表示されます。
このときのp要素をchromeのコンソールで確認してみます。
const p = document.querySelector('p')
console.dir(p)
▼ p
accessKey: ""
align: ""
...
childNodes: NodeList(3)
0: text
1: span
2: text
length: 3
[[Prototype]]: NodeList
...
childNodes内に追加されているのがわかります。
つまり、下記２つの方法は結果に違いはなく、それゆえ簡単な方法１が紹介されていたのですね。
// 方法1 : 直接テキストを渡す
p.append('テキスト');
// 方法2 : オブジェクトにしてから渡す
const text = document.createTextNode('テキスト');
p.append(text);
ただ、Textオブジェクトに対して何か操作したい場合には、先にオブジェクトを作ることに意味が出てくるかと思うので、テキストはそのままで引数に渡すもの、と思わずに済んだのは良かったと思います。