使用javascript / jquery创建<li>元素并将其添加到有序列表

梅格

我正在尝试创建一个“待办事项”列表,当用户输入新任务并单击按钮时,javascript应创建一个li元素,其中包含一个保存用户输入的跨度,然后将该li元素添加到ol中我的HTML。我的HTML看起来像这样:

<body>
    <h1>To Do:</h1>
    <section>

        <input type="text" id="add_todo">
        <span id="add_task_error">&nbsp;</span>
        <input type="button" id="add_task" value="Add task">

        <div id="empty_message" class="open">
            <h3>You have no tasks left to accomplish!</h3>
        </div>

        <div id="tasklist">
            <ol class="list">

            </ol>
        </div>

    </section>
</body>

这是不起作用的功能:

        var newSpan = $('<span>input</span>').addClass("task");
        //wrap it in a <li> element
        newSpan = (".task").wrap("<li></li>");
        $(".list").append(newSpan);

我也这样尝试过:

         var new_task = $('<li>*</li>').addClass('task');
         new_task.appendTo('ol.list');
         new_task.setAttribute('id', 'new_task');
         $("#new_task").text(input);

两种方法都不起作用-当我单击添加任务按钮时(这不是问题,我对其进行了测试),屏幕上没有任何反应...

我究竟做错了什么???

虚拟眼

创建元素,设置所有属性,完成后将其添加到中ol

var new_task = $('<li></li>').addClass('task');
new_task.text($("#add_todo").val()); //this is the value of the input
new_task.attr('id', 'new_task'); //use attr instead of setAttribute    
new_task.appendTo('ol.list');

小提琴

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

获取li项目并将其添加到javascript obj

来自分类Dev

使用jquery将li添加到现有ul

来自分类Dev

Javascript错误:尝试删除类并将其添加到li元素时,出现“未定义不是函数”

来自分类Dev

我如何遍历li的url读取部分,然后使用Jquery将其作为类添加到li

来自分类Dev

jQuery Append函数,将更多元素添加到有序列表和无序列表

来自分类Dev

jQuery Append函数,将更多元素添加到有序列表和无序列表

来自分类Dev

当单击 li 时,将隐藏类添加到所有 li 但不添加到单击的 li 并删除类(如果该类已使用 jquery 可用)

来自分类Dev

将自定义文本添加到有序列表<li>

来自分类Dev

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

来自分类Dev

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

来自分类Dev

当使用jquery单击特定li时,如何将css类添加到列表中?

来自分类Dev

javascript-使用按钮的textarea onclick创建新的<li>元素

来自分类Dev

用Javascript和Jquery添加li元素

来自分类Dev

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

来自分类Dev

使用jQuery'单击'li元素

来自分类Dev

使用jQuery访问<li>元素

来自分类Dev

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

来自分类Dev

如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

来自分类Dev

如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

来自分类Dev

没有获得正确的方法,使用jQuery向li添加li元素

来自分类Dev

简单的jQuery通过<li>元素循环并添加到<datalist>

来自分类Dev

LocalStorage并将li添加到列表

来自分类Dev

创建新元素并将其添加到父元素

来自分类Dev

如何使用jQuery从<li>元素内部获取值并将其放入图像属性标签

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

Javascript使用数组将li添加到ul

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

如何使用 JavaScript 动态创建 <li>?

来自分类Dev

将带有数字的类添加到每个li元素,jquery

Related 相关文章

  1. 1

    获取li项目并将其添加到javascript obj

  2. 2

    使用jquery将li添加到现有ul

  3. 3

    Javascript错误:尝试删除类并将其添加到li元素时,出现“未定义不是函数”

  4. 4

    我如何遍历li的url读取部分,然后使用Jquery将其作为类添加到li

  5. 5

    jQuery Append函数,将更多元素添加到有序列表和无序列表

  6. 6

    jQuery Append函数,将更多元素添加到有序列表和无序列表

  7. 7

    当单击 li 时,将隐藏类添加到所有 li 但不添加到单击的 li 并删除类(如果该类已使用 jquery 可用)

  8. 8

    将自定义文本添加到有序列表<li>

  9. 9

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

  10. 10

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

  11. 11

    当使用jquery单击特定li时,如何将css类添加到列表中?

  12. 12

    javascript-使用按钮的textarea onclick创建新的<li>元素

  13. 13

    用Javascript和Jquery添加li元素

  14. 14

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

  15. 15

    使用jQuery'单击'li元素

  16. 16

    使用jQuery访问<li>元素

  17. 17

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

  18. 18

    如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

  19. 19

    如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

  20. 20

    没有获得正确的方法,使用jQuery向li添加li元素

  21. 21

    简单的jQuery通过<li>元素循环并添加到<datalist>

  22. 22

    LocalStorage并将li添加到列表

  23. 23

    创建新元素并将其添加到父元素

  24. 24

    如何使用jQuery从<li>元素内部获取值并将其放入图像属性标签

  25. 25

    使用JavaScript将多个Li添加到Ul

  26. 26

    Javascript使用数组将li添加到ul

  27. 27

    使用JavaScript将多个Li添加到Ul

  28. 28

    如何使用 JavaScript 动态创建 <li>?

  29. 29

    将带有数字的类添加到每个li元素,jquery

热门标签

归档