How to dynamically create a ul li with appended text from input with Jquery

Question

I have a form that has a text input with an add button. When you click the add button it gets the text from the input and places it below in another div. I need it to be in a dynamically created unordered list that also places the text from the input inside. I need the output to look like

<ul> <li>text from input</li> <li>text from input again</li> </ul>

Im not sure how to properly place the append to create the list and append the text inside. I can get the text value easily and output it just not into a list. Any help about appending would be great.

AlexC · Accepted Answer · 2013-02-19 02:37:20Z

15

HTML:

<input type="test" id="inputName" />
<button id="btnName">Click me!</button>

<ul class="justList"></ul>

JS:

$('#btnName').click(function(){
    var text = $('#inputName').val();
    if(text.length){
        $('<li />', {html: text}).appendTo('ul.justList')
    }
});

Here is the demo :

http://jsfiddle.net/J5nCS/

UPDATE:

for your comments :

here is the url :

http://jsfiddle.net/J5nCS/1/

$('#btnName').click(function(){
    var text = $('#inputName').val() + '<button>x</button>';
    if(text.length){
        $('<li />', {html: text}).appendTo('ul.justList')
    }
});

$('ul').on('click','button' , function(el){
    $(this).parent().remove()
});

edited Feb 19, 2013 at 2:37

answered Feb 13, 2013 at 0:43

AlexC

9,66917 gold badges66 silver badges98 bronze badges

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

3 Comments

user2066695 Over a year ago

I also need to create a little X button to delete a list item in case someone typed the wrong one. Basically like how stackoverflow allows you to delete tags from your question. Would save me some time if someone could post some sample code.

user2066695 Over a year ago

Your my hero! Thanks for the quick response and help.

Matt Catellier Over a year ago

how to do this while adding a class to each list item?

Losbear · Accepted Answer · 2013-02-13 00:38:49Z

0

something like this?

$("#yourbutton").click(function() {
    //uncomment this if you want to wipe the list before adding the LI node:
    //$("#yourUL").empty();

    $("#yourUL").append("<li>" + $("#yourinputtextbox").val() + "</li>");
});

answered Feb 13, 2013 at 0:38

Losbear

3,3231 gold badge34 silver badges29 bronze badges

Comments

dlock · Accepted Answer · 2013-02-13 00:39:29Z

0

You are looking for jQuery appendTo()

$("button").click(function(){
    $("<li>"+$("input").val()+"</li>").appendTo("ul");
});

demo: http://jsfiddle.net/u74Ag/

This might be useful

answered Feb 13, 2013 at 0:39

dlock

9,5979 gold badges50 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to dynamically create a ul li with appended text from input with Jquery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related