使用JavaScript将多个Li添加到Ul

弗朗斯·B

通过onclick事件,我试图将多个LI添加到UL,无论我执行多少appendChilds,都不会使用这种方法添加多个Li。

var form = document.getElementById("form");
var newUl = document.createElement('ul');
var newLi = document.createElement('li');

newButton.addEventListener("click", function(){
form.appendChild(newUl);
newUl.id = "formList";
var formList = document.getElementById("formList");
formList.appendChild(newLi);
formList.appendChild(newLi);
formList.appendChild(newLi);
}

//// html
<div id="form">

 </div>
J·艾伦

您每次必须创建一个单独的元素。

试试这个:

var form = document.getElementById("form");

function newLi() {
    return document.createElement("li");
    }

newButton.addEventListener("click", function(){
    //Create a separate <ul> each time, give it a class, and add it.
    var newUl = document.createElement("ul");
    newUl.class = "formList";
    form.appendChild(newUl);

    //create new <li>'s and append them
    formList.appendChild(newLi());
    formList.appendChild(newLi());
    formList.appendChild(newLi());

    //smile. :D
    }

与穆罕默德不同,我假设您想<ul>每次创建一个单独的无序列表()。

因此,每当单击按钮时,我们都会添加一个新值<ul>,然后将<li>s追加到新值中<ul>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

Javascript使用数组将li添加到ul

来自分类Dev

使用jquery将li添加到现有ul

来自分类Dev

如何使用jQuery将“ <li>”添加到“ <ul>”?

来自分类Dev

使用jQuery将子li动态添加到ul

来自分类Dev

单击提交按钮时如何使用JavaScript将li元素添加到ul

来自分类Dev

使用JavaScript将CSS类添加到动态ul li标签

来自分类Dev

使用javascript将css类添加到ul中的所有li父元素

来自分类Dev

如何将多个跨度添加到 <li> javascript

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

将<li>添加到<ul>并删除附加到<ul>的<li>

来自分类Dev

将li添加到ul中以查找是否存在

来自分类Dev

如何将<ul>添加到li组

来自分类Dev

Python Selenium将Li添加到ul

来自分类Dev

如何将<ul>添加到li组

来自分类Dev

如何将类添加到ul li

来自分类Dev

如何使用C#将“ li”添加到“ ul”标签

来自分类Dev

使用 JavaScript 将 HTML li 文本添加到新的 li 列表

来自分类Dev

将类添加到具有(大于)2 li的ul的ul

来自分类Dev

如何使用javascript将字符串添加到ul中的所有列表项?

来自分类Dev

如何在文本框更改时将ul li添加到div中以及如何使用jQuery从div中删除ul li

来自分类Dev

当导航位于外部文件中时,如何使用 jQuery 将类添加到导航 ul li a?

来自分类Dev

在将<li>元素添加到<ul>时应用淡入效果

来自分类Dev

Vuejs 将 css 类添加到数组中的 ul li 列表

来自分类Dev

将 <li> 添加到 <ul> 有限制(纯 JS)

来自分类Dev

将多个链接添加到Javascript Iframe弹出窗口

来自分类Dev

如何将多个功能添加到javascript var

来自分类Dev

将多个值添加到javascript中的数组或对象

Related 相关文章

  1. 1

    使用JavaScript将多个Li添加到Ul

  2. 2

    Javascript使用数组将li添加到ul

  3. 3

    使用jquery将li添加到现有ul

  4. 4

    如何使用jQuery将“ <li>”添加到“ <ul>”?

  5. 5

    使用jQuery将子li动态添加到ul

  6. 6

    单击提交按钮时如何使用JavaScript将li元素添加到ul

  7. 7

    使用JavaScript将CSS类添加到动态ul li标签

  8. 8

    使用javascript将css类添加到ul中的所有li父元素

  9. 9

    如何将多个跨度添加到 <li> javascript

  10. 10

    将UL添加到LI(不将LI添加到UL)

  11. 11

    将UL添加到LI(不将LI添加到UL)

  12. 12

    将<li>添加到<ul>并删除附加到<ul>的<li>

  13. 13

    将li添加到ul中以查找是否存在

  14. 14

    如何将<ul>添加到li组

  15. 15

    Python Selenium将Li添加到ul

  16. 16

    如何将<ul>添加到li组

  17. 17

    如何将类添加到ul li

  18. 18

    如何使用C#将“ li”添加到“ ul”标签

  19. 19

    使用 JavaScript 将 HTML li 文本添加到新的 li 列表

  20. 20

    将类添加到具有(大于)2 li的ul的ul

  21. 21

    如何使用javascript将字符串添加到ul中的所有列表项?

  22. 22

    如何在文本框更改时将ul li添加到div中以及如何使用jQuery从div中删除ul li

  23. 23

    当导航位于外部文件中时,如何使用 jQuery 将类添加到导航 ul li a?

  24. 24

    在将<li>元素添加到<ul>时应用淡入效果

  25. 25

    Vuejs 将 css 类添加到数组中的 ul li 列表

  26. 26

    将 <li> 添加到 <ul> 有限制(纯 JS)

  27. 27

    将多个链接添加到Javascript Iframe弹出窗口

  28. 28

    如何将多个功能添加到javascript var

  29. 29

    将多个值添加到javascript中的数组或对象

热门标签

归档