Question

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

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

...另一个带有id＆＃34; element4＆＃34;的列表项和文字＆＃34;四＆＃34;在那之下。我试过这个功能，但它不起作用......

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和值），然后将其添加到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的{{3}}。

Answer 4

除了将 li 标签附加到 ul

之外，没有什么可以添加到您的代码中

ul.appendChild(li)

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

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

4 个答案: