创建并添加<李>元素添加到有序列表中

Create and add a <li> element to an ordered list using javascript/jquery

本文关键字：添加 列表 lt 创建 gt 元素      更新时间：2023-09-26

我正在尝试创建一个待办事项列表，当用户输入一个新任务并单击按钮时，javascript应该创建一个li元素，其中包含一个保存用户条目的span，然后将该li元素添加到我的HTML中的ol中。我的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);

这两种方法都不起作用——当我点击"添加任务"按钮时（这不是问题——我测试了它），屏幕上什么都没有发生。。。

我做错了什么？？？

试试这个

$(document).ready(function(){
  $('#add_task').click(function(){
    var task = $('#add_todo').val();
    var html = '<li><span>'+task+'</span></li>';
    $('.list').append(html);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

创建元素，设置所有属性，完成后将其添加到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');

FIDDLE

希望这对你有效

JS代码：

$("#add_task").click(function(){
    var value = $("#add_todo").val();
    $(".list").append("<li class='task'><span>"+ value +"</span></li>")
});

这是工作的Plnkr

这应该是您的代码。点击按钮调用addLI（）

<input type="button" id="add_task" value="Add task" onclick="addLI()">
function addLI() {
    //check for empty value
    if ($('#add_todo').val() == "") {
        alert("Please Add Todo.");
        return;
    }
    //generate html for li
    var html = "<li class='task' id='new_task'><span>" + $('#add_todo').val() + "</li>";
    //append li to order list
    $(".list").append(html);
}

在添加任何新任务之前，还要尝试隐藏显示消息的div。

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

添加任务的$('.open').hide();点击事件

相关文章：