如何使用jquery添加元素

How to add elements using jquery

本文关键字：元素 添加 jquery 何使用      更新时间：2023-09-26

我想在点击事件中添加元素，有一个输入文本元素，当用户点击添加时，我想将其作为一个项目添加到无序列表中。这很简单，我更喜欢只使用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);
    });
});

有了这个：

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

您正在使用链接。这意味着每个.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>

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

修复：

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

http://jsfiddle.net/b4y8Lxf4/

相关文章：