使用 javascript 構建 UL 僅創建 1 li 元素

Question

我正在嘗試使用 javascript 創建一個列表。 但是我的 p 標簽只會采用我定義的最后一個 p 標簽的值。

這是我的代碼https://jsfiddle.net/1Lt76jw2/我嘗試添加lu.appendChild(li); 在我的 p 標簽之間，但這也不起作用。

假設 output 應該是

測試123

測試456

測試789

每個測試都在一個 p 標簽上

Answer 1

您只創建一個p元素並將所有值分配給它的innerHTML 。 每一個都會覆蓋前一個。 Function 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>