Question

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

我首先用

创建元素

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

第二，我用以下方法创建文本节点：

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

最后，我将文本附加到li上：

const newMessage = li.appendChild(text);

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

似乎是一个巨大的菜鸟问题，但我不确定我缺少什么吗？

谢谢

Answer 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>

Answer 2

Node.appendChild()

返回值

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

您无需在变量中分配public default boolean checkFalse(Object f) { if(f instanceof testest) { ((testest)f).someMethod(); } else throw new RuntimeException(); }：

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);

Answer 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);

<ul></ul>

Javascript createElement并追加子节点

3 个答案: