javascript - 如何使用jquery添加元素

Question

我想在单击事件上添加元素，有一个输入文本元素，当用户单击添加时，我想将其作为项目添加到无序列表中。这很简单，我更喜欢只用 JS 来完成，但必须使用 JQuery。所以，基本上我想:

1. 获取输入文本的值
2. 将 li 项附加到 ul 列表
3. 为 li 项目附加标签
4. 将输入中的值添加为标签文本。

这是我的代码 - 它绝对不起作用，但上述 4 个步骤是我想在 JQuery 中实现的:

$(document).ready(function(){
    var $add_button = $('#add-item')
    var newItem;
    var $incompleteTasks = $('#incomplete-tasks');
    $add_button.click(function(){
        newItem = $('#new-task').val();
        // append new item to incomplete tasks ul
        $incompleteTasks.append('<li>appended</li>')
            .append('<label></label>').text(newItem);
    });
});

Answer 1

有了这个:

$incompleteTasks
.append('<li>appended</li>')
.append('<label></label>')
.text(newItem);

您正在使用 chaining 。这意味着每个 .append(something)返回$incompleteTasks具有更新内容的元素。
调用.text(newItem)最后，您将用单个输入字段值替换元素的全部内容:

$incompleteTasks
.append('<li>appended</li>')
//RESULT: <ul><li>appended</li></ul>

.append('<label></label>')
//RESULT: <ul><li>appended</li><label></label></ul>

.text(newItem);
//RESULT: <ul>newItem</ul>

如果要将值附加到<label>然后是<label>...</label>到<ul>元素，你可以这样做:

$incompleteTasks.append('<li><label>'+newItem+'</label></li>');
// OR:
$('<li><label>'+newItem+'</label></li>').appendTo($incompleteTasks);
// OR:
var label = $('<label/>').text(newItem);
$('<li />').append(label).appendTo($incompleteTasks);
// ...

您最终应该得到如下代码:

$(document).ready(function(){
    var $add_button = $('#add-item')
    var newItem;
    var $incompleteTasks = $('#incomplete-tasks');
    
    $add_button.click(function(){
        
        newItem = $('#new-task').val();
        // Create <label> element and append text in:
        var label = $('<label/>').text(newItem);
        // Create <li> element, append prevously created <label>, and finally append that <li> to <ul>:
        $('<li />').append(label).appendTo($incompleteTasks);
        
    });
});

label{
 display:block;
 border: 1px solid #e0e0e0;
 background:#fafafa;
 width:200px;
 padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id=new-task>
<button id=add-item>add-item</button>
<ul id=incomplete-tasks></ul>