Javascript createElement 和追加子节点答案

【问题标题】：Javascript createElement and append child nodeJavascript createElement 和追加子节点
【发布时间】：2019-02-10 19:57:26
【问题描述】：

我正在尝试创建一个元素并向其附加一个子节点，但我的返回只是一个没有该元素的字符串。

我首先用

创建元素

const li = document.createElement('li');

其次，我正在创建文本节点：

const text = document.createTextNode('hello');

最后我将文本附加到 li 中：

const newMessage = li.appendChild(text);

console.log(newMessage) 的结果只是消息的字符串。 dom 中的输出也只是一个字符串。我期待带有文本节点的完整 li 元素。我也尝试过使用 innerHTML 而不是 appendChild。

似乎是一个巨大的菜鸟问题，但我不确定我错过了什么？

谢谢，

【问题讨论】：

appendChild 返回附加的节点（这里是text；这里是text === newMessage，没有多大意义）。尝试记录li

标签： javascript

【解决方案1】：

将li 元素也附加到dom 以显示它。

const li = document.createElement('li');
const text = document.createTextNode('hello');
var a=li.appendChild(text);
document.getElementById("list").appendChild(li)
console.log(a)

<ul id="list">
</ul>

【讨论】：

啊当然。这么愚蠢的时刻！我会尽快接受答案。

【解决方案2】：

Node.appendChild()

返回值

返回值是附加的孩子，除非给定的孩子是DocumentFragment，在这种情况下返回空的DocumentFragment。

您不需要在变量中分配li.appendChild：

const li = document.createElement('li');
const text = document.createTextNode('hello');
li.appendChild(text);
console.log(li.appendChild(text).nodeName); // #text
document.querySelector('ul').appendChild(li);

&lt;ul&gt;&lt;/ul&gt;

【讨论】：

【解决方案3】：

您必须将 li 附加到 DOM 中才能显示。您可以通过查询父元素并在其上使用appendChild 来做到这一点：

document.querySelector('ul').appendChild(li);

appendChild 函数返回刚刚附加的节点。在您的情况下，newMessage 将是附加到您的li 的文本节点，请参阅the MDN appendChild doc。

const li = document.createElement('li');
const text = document.createTextNode('hello');
const newMessage = li.appendChild(text);

document.querySelector('ul').appendChild(li);

console.log(newMessage);

&lt;ul&gt;&lt;/ul&gt;

【讨论】：