Question

这是一个关于javascript如何编译（我认为）以及如何将文本附加到HTML文档的问题。

我正在关注一个示例here，因为我想以交互方式将一个元素附加到文档中的列表中。

我的html文件包含一个列表：

<ul id="sList"> </ul>

如果我写这样的javascript：

var textnode = document.createTextNode(s);
var node = document.createElement("li");
node.appendChild(textnode);
document.getElementById("sList").appendChild(node);

每个字符串（每个字符串都保存在变量s中）会附加到文档中的列表中。

我天真地以为我可以用更少的行来写这个。

var node = document.createElement("li");
node.appendChild(document.createTextNode(s));
document.getElementById("sList").appendChild(node);

按预期工作，将每个s作为列表项附加到列表中，但如果我尝试通过不将创建的“li”存储为变量来进一步减少代码，则每个都无法正确显示为列表项。例如，此脚本在标记之间附加文本，但不作为列表项：

var textnode = document.createTextNode(s)
var node = (document.createElement("li")).appendChild(textnode)
document.getElementById("sList").appendChild(node)

同样，我的第一次尝试就是这个单线：

document.getElementById("sList").appendChild(document.createElement("li").appendChild(document.createTextNode(s)))

也会在<ul>标记中附加文字，但不会作为列表项。

所以我只是想知道编译器如何将文本节点的appendChild调用解释为尚未创建的document.createElement，以及是否可以将项目附加到列表而不将它们首先存储为变量。这个问题出于好奇，虽然我认为更好地理解DOM以及如何用更少的javascript做更多的事情会很好。

Answer 1

所以我只是想知道编译器如何将textnd节点的appendChild调用解释为还没有创建的document.createElement ......

它不是编译器，而是DOM。并且已创建元素（您称为createElement）;还没有发生的事情是你还没有把它添加到文档中，但那很好，它仍然是一个对象，它仍然可以附加其他对象。< / p>

以及是否可以将项目附加到列表而不将它们首先存储为变量。

是的，使用appendChild的返回值，is the child element that was appended：

list.appendChild(document.createElement('li')).appendChild(document.createTextNode(s));

所以，我们：

创建li元素
将其附加到列表
使用追加它的返回值（li元素）附加文本节点

例如，这会在标记之间附加文本，但不会作为列表项添加：
var textnode = document.createTextNode(s)
var node = (document.createElement("li")).appendChild(textnode)
document.getElementById("sList").appendChild(node)

这是因为您将appendChild的返回值附加到列表中。 appendChild的返回值是附加的子项，不是它附加到的元素。所以node指的是文本节点。将该节点附加到li后，您将移动到上面最后一行的list。

如何以交互方式将文本作为列表项附加到HTML文档中的列表而不将列表项存储为javascript变量？

1 个答案: