CODEWITHSUNDEEP
jqueryhtml
Zachary
Zachary

Reputation: 87

.append not adding .item to .list

This is part of a lesson on Codecademy. This is a Jquery lesson. I cannot figure out how to append the .item to the .list. They don't explain it on the website and I have been unable to find an answer that I understand.

HTML Code

    <!DOCTYPE html>
<html>
    <head>
        <title>To Do</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <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>
</html>

NEW Jquery Code

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

The problem is that I cannot get .item to add into .list. I'm a brand new jQuery user so this is a bit difficult for me to understand. Even after fixing the syntax error it is not adding the correct items.

The website is giving me this error:Oops, try again. Make sure to use .append() to add your .item to your .list!

Upvotes: 3

Views: 317

Answers (3)

Mohamadjavad Vakili
Mohamadjavad Vakili

Reputation: 3348

try this:

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

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

The that you have used will not append the elements as you expected.

Try to pass the class and text as an object,

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

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

$('#button').click(function() {
    var toAdd = $('input[name=checkListItem]').val();
    $('div').append('<div class=".item">') + toAdd+ '</div>'; // Error on this line
});

You are closing function incorrectly. It should be - 

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

Upvotes: 4

Related Questions