如何添加新的< li>到< ul> onclick与JavaScript [英] how to add new <li> to <ul> onclick with javascript

问题描述

如何使用onclick中的函数将列表元素添加到现有的ul中？我需要它添加到这种类型的列表...

How do I add a list element to an existing ul using a function from an onclick? I need it to add to this type of list ...

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

...另一个ID为element4和文字Four的列表项。我试过这个函数，但它不起作用...

... another list item with the id "element4" and text "Four" under that. I tried this function but it doesn't work...

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

我不知道JQuery，所以只需要javascript。谢谢！

I don't know JQuery so Javascript only please. Thank you!!

推荐答案

您没有附加您的 li 作为孩子到你的 ul 元素

You have not appended your li as a child to your ul element

试试这个

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

如果您需要设置ID，您可以通过

If you need to set the id , you can do so by

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

将函数转换为

Which turns the function into

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);
}

这篇关于如何添加新的< li>到< ul> onclick与JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！