创建并添加一个<；李>；元素添加到使用javascript/jquery的有序列表中_Javascript_Jquery_Html

创建并添加一个<；李>；元素添加到使用javascript/jquery的有序列表中

javascript jquery html

创建并添加一个<；李>；元素添加到使用javascript/jquery的有序列表中,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试创建一个待办事项列表，当用户输入一个新任务并单击按钮时，javascript应该创建一个li元素，其中包含一个保存用户条目的范围，然后将该li元素添加到HTML中的ol中。我的HTML如下所示： <body> <h1>To Do:</h1> <section> <input type="text" id="add_todo"> <span id="add_task_er

我正在尝试创建一个待办事项列表，当用户输入一个新任务并单击按钮时，javascript应该创建一个li元素，其中包含一个保存用户条目的范围，然后将该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 newSpan=$（'input'）.addClass（“任务”）；
//将其包装在元素中
newSpan=（“.task”）.wrap（“
”）；
$（“.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);

var new_task=$（'*'）。addClass（'task'）；
新任务附录（'ol.list'）；
new_task.setAttribute（'id'，'new_task'）；
$（“#新任务”）。文本（输入）；

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

我做错了什么？

这应该是你的代码。单击按钮时调用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);
}


函数addLI（）{
//检查空值
if（$（'#add_todo'）.val（）=“”）{
警告（“请添加待办事项”）；
返回；
}
//为li生成html
var html=“”+$（'add_todo'）.val（）+“”；
//将li追加到订单列表
$（“.list”）.append（html）；
}

希望这对你有用

JS代码：

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

$（“#添加任务”）。单击（函数（）{
var值=$（“#添加#todo”）.val（）；
$（“.list”）.append（“”+value+””）
});

这是工作方法

试试这个

$（文档）.ready（函数（）{
$（“#添加_任务”）。单击（函数（）{
var task=$（'#add#todo'）.val（）；
var html=''+task+''；
$（'.list'）.append（html）；
})
})


要做：
你没有任务要完成了！

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

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

var new_task=$（''）。addClass（'task'）；
新建任务.text（$（“#添加待办事项”）.val（）//这是输入的值
new_task.attr（'id'，'new_task'）//使用attr而不是setAttribute
新任务附录（'ol.list'）；

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

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


你没有任务要完成了！

$（'.open'）.hide（）添加任务的点击事件
你能分享小提琴吗？耶！它起作用了！你的解决方案似乎很简单-它几乎只是改变了我最初的操作顺序，但我坚持了好几天…@Meg不仅仅是这个，使用attr
很重要。它与setAttribute有何不同？