javascript - 使用JavaScript将多个Li添加到Ul

通过onclick事件，我尝试向UL添加多个LIst，无论我执行多少appendChild，都不会使用此方法添加多个List。

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>

最佳答案

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

尝试这个：

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>中。