Document.createElement（）vs Document.createTextNode（） - Javascript

Question

我试图找出这两者之间的区别：

// first one
var h1 = document.createElement('h1');
var t = document.createTextNode('hey');
h1.appendChild(t);
document.body.appendChild(h1);

// second one
document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')));

第一个（Document.createElement()）完美无缺，但第二个（Document.createTextNode()）却没有。

Answer 1

appendChild的返回值是附加的子项。

因此，如果我们将变量添加到：

document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')));

它被分解为：

var text = document.createTextNode('hey');
var h1 = document.createElement('h1');
h1.appendChild(text);
document.body.appendChild(text);

将text附加到body会从text中移除h1。

h1被丢弃，因为它永远不会被附加到任何地方。

Answer 2

我找到了一种方法:(只需在末尾添加.parentNode）

document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')).parentNode);