How to add elements using jquery

Question

I want to add elements on click event, there is an input text element and when user clicks on add I want to add that as an item to an unordered list. This is simple I prefer to do it with just JS but have to use JQuery. So, basically I want to:

1. get value of the input text
2. append li item to ul list
3. append a label for the li item
4. add value from input as text for label.

Here's my code - it's definitely not working but the above 4 steps is what I want to achieved in 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);
 });
});

• EternalHour: Some HTML would be helpful.

Answer 1

With this one:

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

You're using a chaining. It means that every .append(something) returns $incompleteTasks element with updated content.
Calling .text(newItem) at the end, you're replacing whole content of the element by just single inputfield value:

$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>

If you want to append the value to the <label> and then that <label>...</label> to the <ul> element, you can do this way:

$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);
// ...

You should end up with code like this:

$(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

Your problem in .text(newItem) because it is called on $incompleteTasks and every time overrides ul's content.

Fix:

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

http://jsfiddle.net/b4y8Lxf4/