Create and add a <li> element to an ordered list using javascript/jquery

Question

I'm trying to create a To Do list, and when the user enters a new task, and clicks the button, the javascript should create a li element containing a span that holds the user's entry, then add that li element to the ol in my HTML. My HTML looks like this:

<body>
    <h1>To Do:</h1>
    <section>

        <input type="text" id="add_todo">
        <span id="add_task_error">&nbsp;</span>
        <input type="button" id="add_task" value="Add task">

        <div id="empty_message" class="open">
            <h3>You have no tasks left to accomplish!</h3>
        </div>

        <div id="tasklist">
            <ol class="list">

            </ol>
        </div>

    </section>
</body>

This is the function that is not working:

        var newSpan = $('<span>input</span>').addClass("task");
        //wrap it in a <li> element
        newSpan = (".task").wrap("<li></li>");
        $(".list").append(newSpan);

I also tried it this way:

         var new_task = $('<li>*</li>').addClass('task');
         new_task.appendTo('ol.list');
         new_task.setAttribute('id', 'new_task');
         $("#new_task").text(input);

Both ways did not work- when I clicked the Add Task button (which is not the problem- I tested it), nothing happened on the screen...

What am I doing wrong???

can you share a fiddle jsfiddle.net ?

gurvinder372
– gurvinder372

2015-12-09 08:07:39 +00:00
Commented Dec 9, 2015 at 8:07 — gurvinder372
– gurvinder372, Commented Dec 9, 2015 at 8:07

Shuvro · Accepted Answer · 2015-12-09 08:12:34Z

4

Try this

$(document).ready(function(){
  $('#add_task').click(function(){
    var task = $('#add_todo').val();
    var html = '<li><span>'+task+'</span></li>';
    $('.list').append(html);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>To Do:</h1>
    <section>

        <input type="text" id="add_todo">
        <span id="add_task_error">&nbsp;</span>
        <input type="button" id="add_task" value="Add task">

        <div id="empty_message" class="open">
            <h3>You have no tasks left to accomplish!</h3>
        </div>

        <div id="tasklist">
            <ol class="list">

            </ol>
        </div>

    </section>

answered Dec 9, 2015 at 8:12

Shuvro

1,4994 gold badges14 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ojovirtual · Accepted Answer · 2015-12-09 08:13:38Z

0

Create the element, set all the attributes and when, you are done, add it to the ol.

var new_task = $('<li></li>').addClass('task');
new_task.text($("#add_todo").val()); //this is the value of the input
new_task.attr('id', 'new_task'); //use attr instead of setAttribute    
new_task.appendTo('ol.list');

FIDDLE

answered Dec 9, 2015 at 8:13

ojovirtual

3,36219 silver badges21 bronze badges

3 Comments

Meg Over a year ago

Yay! It works! Your solution seems so simple- it's pretty much just changing the order of how I did it originally, but I was stuck on this for days...

ojovirtual Over a year ago

@Meg not just this, the use of attr is important.

Meg Over a year ago

How is it different than setAttribute?

Arun AK · Accepted Answer · 2015-12-09 08:12:02Z

0

Hope this works for you

JS code:

$("#add_task").click(function(){
    var value = $("#add_todo").val();
    $(".list").append("<li class='task'><span>"+ value +"</span></li>")
});

Here is the working Plnkr

answered Dec 9, 2015 at 8:12

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

Comments

Parth Trivedi · Accepted Answer · 2015-12-09 08:17:43Z

0

This should be your code. Call addLI() on click of your button

<input type="button" id="add_task" value="Add task" onclick="addLI()">

function addLI() {
    //check for empty value
    if ($('#add_todo').val() == "") {
        alert("Please Add Todo.");
        return;
    }
    //generate html for li
    var html = "<li class='task' id='new_task'><span>" + $('#add_todo').val() + "</li>";

    //append li to order list
    $(".list").append(html);
}

edited Dec 9, 2015 at 8:17

answered Dec 9, 2015 at 8:11

Parth Trivedi

3,8321 gold badge23 silver badges41 bronze badges

Comments

shishir · Accepted Answer · 2015-12-10 09:10:24Z

0

Also try to hide the div on which you are showing the message before adding any new task.

<div id="empty_message" class="open">
            <h3>You have no tasks left to accomplish!</h3>
        </div>

$('.open').hide(); on click event of add task

answered Dec 10, 2015 at 9:10

shishir

8373 gold badges11 silver badges27 bronze badges

Collectives™ on Stack Overflow

Create and add a <li> element to an ordered list using javascript/jquery

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related