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

【问题标题】：Building UL with javascript only creates 1 li element使用 javascript 构建 UL 仅创建 1 li 元素
【发布时间】：2020-05-23 12:23:07
【问题描述】：

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

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

假设的输出应该是

测试123

Test456

Test789

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

【问题讨论】：

标签： javascript html html-lists innerhtml

【解决方案1】：

您应该为每个单独的元素创建新的 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>

【讨论】：

【解决方案2】：

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

【讨论】：