使用javascript

Question

使用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不能多次附加同一节点。

  

Node.appendChild（）方法将节点添加到指定父节点的子节点列表的末尾。如果给定子节点是对文档中现有节点的引用，则appendChild（）将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点中删除节点）。这意味着节点不能同时位于文档的两个点中。因此，如果节点已经有父节点，则首先删除该节点，然后将其附加到新位置。

Description at MDN

Answer 2

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/

Answer 3

每次都必须制作一个单独的元素。

试试这个：

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 4

在您的帖子中同时纠正的内容太多了。但是，如果您尝试模拟LI，则可以使用cloneNode

进行克隆

＆＃13;

＆＃13;

var template_ul = document.createElement('ul');
var template_li = document.createElement('li');
let newButton = document.getElementById('new');
var count = 0;

newButton.addEventListener("click", function() {
  let list = template_ul.cloneNode();
  document.getElementById('form').appendChild(list);

  
  let first_li = template_li.cloneNode();
  var text = document.createTextNode(++count);
  first_li.appendChild(text);
  
  list.appendChild(first_li);
  list.appendChild(template_li.cloneNode());
  list.appendChild(template_li.cloneNode());
});

＆＃13;

body { 
  text-align:center;
}
button { margin: 4px auto 1em; }

ul {
  margin: 0 auto 1em;
  padding: 0;
  width: 50%
}

ul:nth-child(2n) li{
  background:#c90;
}


li {
  list-style-type: none;
  background: #09c;
  height: 20px;
  padding: 2px;
}

ul,
li {
  border: 1px solid #444;
}

＆＃13;

<button id="new">New</button>
<div id="form">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

PSIsContainer