Question

我想在click事件上添加元素，有一个输入文本元素，当用户点击add时，我想将它作为项添加到无序列表中。这很简单，我更喜欢用JS做，但必须使用JQuery。所以，基本上我想：

获取输入文本的值
将li项目附加到ul list
为li项目添加标签
从输入中添加值作为标签的文本。

这是我的代码 - 它肯定不起作用，但上述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>

Answer 2

.text(newItem)中的问题，因为它被调用了 $incompleteTasks并且每次都会覆盖ul的内容。

修复：

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

http://jsfiddle.net/b4y8Lxf4/

如何使用jquery添加元素

2 个答案: