如何使用javascript将新的<li>添加到<ul> onclick

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

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

…另一个列表项目的id“element4”和文本“四”下。 我试过这个function，但是不起作用…

 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转化为

 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和voila！

所以只需添加

 ul.appendChild(li); 

到你的函数结束。

Answer 3

首先你必须创build一个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 例子 。