DOM Manipulation

DOM Manipulation

本文关键字：Manipulation DOM      更新时间：2023-09-26

新手问题-这段代码是否足以创建四个列表项？或者我应该使用documentFragment吗？代码似乎运行良好-JsFiddle。

已创建列表和li变量

var list = document.getElementById("myList");
var li = null;

创建了x个列表元素和配套文本节点

for(var i=1; i<=4; i++){
var li = document.createElement("li");  
li.appendChild(document.createTextNode("Number " + i));

将li添加到列表

list.appendChild(li);

}

完全基于您提供的JSFiddle演示：不。您目前拥有的内容在语义上不正确。您当前正在将li附加到body，而不是ul元素：

<ul></ul>
<li>Number 1</li>

更改：

document.body.appendChild(li);

收件人：

list.appendChild(li);

JSFiddle演示。

至于您在问题中提供的代码，您还需要对其进行更改，以便将li元素附加到ul元素中。您还需要将class更改为ID，因为getElementById("myList")拉取ID为"0"的元素；myList"；，而您当前的ul没有这样的ID。

实际上有一个错误，因为您将li s添加到body而不是ul标记也没有创建好，请更改

<ul class="myList"></ul>

带有

<ul id="myList"></ul>

使用id然后：

var list = document.getElementById("myList");
var li = null;
for(var i=1; i<=4; i++){
   var li = document.createElement("li");  
   li.appendChild(document.createTextNode("Number " + i));
   //document.body.appendChild(li); **error here**
   list.appendChild(li); //fix
}
相关文章：