如何添加新的<li>至<ul>用javascript點擊

Question

如何使用 onclick 中的函數將列表元素添加到現有 ul？ 我需要它添加到這種類型的列表中......

<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul> 

...另一個列表項，其 id 為“element4”，文本為“Four”。 我試過這個功能，但它不起作用......

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
}

我不知道 JQuery，所以請只使用 Javascript。 謝謝！！

Answer 1

您還沒有將您的li作為孩子附加到您的ul元素

嘗試這個

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  ul.appendChild(li);
}

如果你需要設置 id ，你可以這樣做

li.setAttribute("id", "element4");

這將功能變成

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  li.setAttribute("id", "element4"); // added line
  ul.appendChild(li);
  alert(li.id);
}

Answer 2

你幾乎在那里：

您只需要將li附加到ul和瞧！

所以只需添加

ul.appendChild(li);

到你的函數結束，所以結束函數將是這樣的：

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
  ul.appendChild(li);
}

Answer 3

首先，您必須創建一個li （根據需要使用 id 和 value），然后將其添加到您的ul中。

Javascript ::

addAnother = function() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var children = ul.children.length + 1
    li.setAttribute("id", "element"+children)
    li.appendChild(document.createTextNode("Element "+children));
    ul.appendChild(li)
}

檢查這個將li元素添加到ul的示例。

Answer 4

只需使用innerHTML ：

function function1() {
  ul.innerHTML += `<li> four </li>`;
}

Answer 5

除了將li標簽附加到ul之外，沒有什么可添加到您的代碼中

ul.appendChild(li)

然后你只需將它添加到你的函數中，然后它就可以工作了。