用javascript构建UL只创建1个li元素

Question

我想用javascript创建一个列表，但我的p标签只取我定义的最后一个p标签的值。

我的代码是这样的 https:/jsfiddle.net1Lt76jw2我试着加入了 lu.appendChild(li); 在我的p标签之间，但这也不行。

假设输出应该是

测试123

测试456

测试789

每个测试都有一个p标签

Answer 1

你应该创建新的 p 和 利 元素。

myUL = document.getElementById("myUL");
var ul = document.createElement('ul');
var li = document.createElement('li');
var p = document.createElement('p');

p.innerHTML = "Test123";
li.appendChild(p);
ul.appendChild(li);

p = document.createElement('p');
p.innerHTML = "Test456";
li = document.createElement('li');
li.appendChild(p);
ul.appendChild(li);


p = document.createElement('p');
p.innerHTML = "Test789";
li = document.createElement('li');
li.appendChild(p);
ul.appendChild(li);

myUL.appendChild(ul);

<div id="myUL">

</div>

Answer 2

你只创建一个 p 元素，并将你所有的值分配给它的 innerHTML. 每一个都会覆盖前一个。appendChild 并不是复制一个元素，而是附加你最初创建的元素。

Answer 3

你正在覆盖 innerHTML 而不是追加到它，因为你们使用的是同一个元素。最好每次都创建新的子元素，如下所示。

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

var li = document.createElement('li');
var p = document.createElement('p');
p.innerHTML = "Test123";
li.appendChild(p);
ul.appendChild(li);

li = document.createElement('li');
p = document.createElement('p');
p.innerHTML = "Test456";
li.appendChild(p);
ul.appendChild(li);

li = document.createElement('li');
p = document.createElement('p');
p.innerHTML = "Test789";
li.appendChild(p);
ul.appendChild(li);

myUL.appendChild(ul);

<div id="myUL">

</div>