Question

使用 javascript 将多个 Li 添加到 Ul

2016-09-02

12453

javascript

我尝试使用 onclick 事件将多个 LI 添加到 UL，无论我执行多少个 appendChild，它都不会使用此方法添加多个 Li。

var form = document.getElementById("form");
var newUl = document.createElement('ul');
var newLi = document.createElement('li');

newButton.addEventListener("click", function(){
form.appendChild(newUl);
newUl.id = "formList";
var formList = document.getElementById("formList");
formList.appendChild(newLi);
formList.appendChild(newLi);
formList.appendChild(newLi);
}

//// html
<div id="form">

 </div>

Answer 1

newLi 是您希望附加到 formList 的节点的引用。它只能存在一次。

因此，第一次执行 formList.appendChild(newLi) 时，它会将其附加到 formList。第二次执行时，它会从第一个位置移除并添加到第二个位置。第三个位置也是一样。

您不能使用 appenChild 多次附加同一个节点。

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node). This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position.

MDN 上的说明

Answer 2

每次您都必须创建一个单独的元素。

试试这个：

var form = document.getElementById("form");

function newLi() {
    return document.createElement("li");
    }

newButton.addEventListener("click", function(){
    //Create a separate <ul> each time, give it a class, and add it.
    var newUl = document.createElement("ul");
    newUl.class = "formList";
    form.appendChild(newUl);

    //create new <li>'s and append them
    formList.appendChild(newLi());
    formList.appendChild(newLi());
    formList.appendChild(newLi());

    //smile. :D
    }

与穆罕默德不同，我假设您每次都想创建一个单独的无序列表 ( <ul> )。

因此，每当单击按钮时，我们都会添加一个新的 <ul> ，然后将我们的 <li> 附加到新的 <ul> 中。

Answer 3

var form = document.getElementById("form");
var newUl = document.createElement('ul');

newUl.id = "formList";
form.appendChild(newUl);

newButton.addEventListener("click", function(){
    var newLi = document.createElement('li');
    newUl.appendChild(newLi);
})

您需要创建一次 ul ，并为其分配 id = "formList" ，然后将其附加到 form
每次单击时，创建新的 li 元素
您不需要再次选择 ul ，因为您已经有了对它的引用。

在这里您可以找到一个可用的小提琴 https://jsfiddle.net/LeoAref/m5d0bzeL/