如何使用javascript将添加到 onclick

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 ...

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

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

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

...另一个列表项，其id为“element4”，文本为“Four”。我试过这个功能，但它不起作用......

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

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

我不知道JQuery所以Javascript只是请。谢谢！！

3 个解决方案

#1

115

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

您没有将您的李作为孩子添加到您的ul元素

Try this

尝试这个

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

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

如果你需要设置id，你可以这样做

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

#2

You were almost there:

你几乎在那里：

You just need to append the li to ul and voila!

你只需要把李附加到ul和瞧！

So just add

所以只需添加

ul.appendChild(li);

to the end of your function so the end function will be like this:

到函数结束，所以结束函数将是这样的：

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

#3

First you have to create a li(with id and value as you required) then add it to your ul.

首先，您必须创建一个li（根据需要使用id和value），然后将其添加到ul。

Javascript ::

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

Check this example that add li element to ul.

检查此示例将li元素添加到ul。

#1

115