使用 javascript 构建 UL 仅创建 1 个 li 元素

Question

我正在尝试使用 javascript 创建列表。但是我的 p 标签只会采用我定义的最后一个 p 标签的值。

这是我的代码https://jsfiddle.net/1Lt76jw2/ 我尝试在我的 p 标签之间添加 lu.appendChild(li);，但这也不起作用。

假设的输出应该是

测试123

Test456

测试789

每个测试都在一个 p 标签上

Answer 1

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

Answer 2

您应该为每个单独的元素创建新的 p 和 li 元素：

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>

使用 javascript 构建 UL 仅创建 1 个 li 元素

Building UL with javascript only creates 1 li element

html

javascript

innerhtml

html-lists