12 why it is item?


#1

at first I wrote the code like this

$(document).ready(function(){
$('#button').click(function(){
    var toAdd= $('input[name=checkListItem]').val();
    $('.list').append('<div class="list">'+toAdd+'</div>')
    });
});

and found last item append twice,why

append('<div class="list">'+toAdd+'</div>')

should change to

append('<div class="item">'+toAdd+'</div>')

#2

hey I'll try to explain to you why we should use "item" and not "list" after the append

<body>
	<h2>To Do</h2>
	<form name="checkListForm">
		<input type="text" name="checkListItem"/>
	</form>
	<div id="button">Add!</div>
	<br/>
	<div class="list"></div>
</body>

as you can see in the html, you have an empty div with class="list"; This is where the text yet will be presented, so list is our output, not our input.
The thing where you enter your text is a special kind of div, a form (you might notice that it is more like a description from a "link" than from a "div" in some aspects). Thats where you want to enter your information. In the html we declared this thing as a checkList (!! notice that I left the Form part out because it just something that declares what type of thing we are talking about).

<input type="text" name="checkListItem"/>

what we say here is: we have an input for our checkList which has an "checkList"name/class of "Item".

Now we know that the 'list' part refers to the output, and the 'item' refers to the thing we put within the form called checklist.

I hope this helped you :smile:

Ps: I am not completely sure though if a always has an input called "item" or if it is just something we declared by name="checkListItem", so that's my bad


#3

Because you are creating a new div class(item) to print out the information that you write into the box and this is added to the 'list' class.

$('.list').append('<div class='item">' +  toAdd + '</div>');

It concatenates your answer to the class 'item'. This item is then appended to the 'list' class.


#4

We need more explanations like these. Thanks.