CODEWITHSUNDEEP
javascriptjqueryhtmldom
Lorraine Bernard
Lorraine Bernard

Reputation: 13430

how to create a list using jquery

Running the following code:

$('<div>').append('<ul>').append($('<li>').text('text'));

I would like to have 

<div>
 <ul>
    <li>text</li>
 </ul>
</div>

What is wrong in my code?

Upvotes: 4

Views: 7029

Answers (7)

GautamD31
GautamD31

Reputation: 28773

Simply use this

$("#Div_id").append('<ul>
                         <li>ListItem1</li>
                         <li>ListItem2</li>
                         <li>ListItem3</li>
                         <li>ListItem4</li>
                    </ul>');

like this if you put this append for an click event you can generate many lists as the clicks

Upvotes: 0

Bas Slagter
Bas Slagter

Reputation: 9929

The order of the append functions is wrong...you are now appending the li to the div, next to the ul, not inside it.

This would be better:

var $myList = $('ul').append('<li>text</li>');
$('div').append($myList);

Upvotes: 4

Berker Y&#252;ceer
Berker Y&#252;ceer

Reputation: 7335

As i see everybody first tries to walk around than does the job wanted..

This is ur html:

<div>
    <ul>
        <li>text</li>
    </ul>
</div>

And this is the code you should use

var MyString = "Write something here!"
$("someParent").append('<div> <ul> <li> ' + MyString + ' </li> </ul> </div>');

or just do 

$("someParent").append('<div> <ul> <li> Text </li> </ul> </div>');

if you would like to add more than 1 list item than

with razor syntax and MVC:

var items = '@foreach(SelectListItem item in (System.Collections.IEnumerable)ViewData["MYItems"]){ <li> @item.Text </li> }';
$("someParent").append('<div> <ul>' + items + '</ul> </div>');

without razor syntax:

var items = "<li> A </li>" + 
            "<li> B </li>" + 
            "<li> C </li>" + 
            "<li> D </li>" +  
            "<li> E </li>";
$("someParent").append('<div> <ul>' + items + '</ul> </div>');

there are more than couple ways to do it just pick what you wanna do.

Upvotes: 0

user899205
user899205

Reputation:

If you just want the div and no need to have a reference to UL or LI this is a easy clear way :

$('<div><ul><li>text</li></ul></div>');

Upvotes: 1

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

It starts from left to right, so you append ul to the div and then append li to the div.
You can fix this using the following.

var $ul = $('<ul>');
var $li = $('<li>').text('text');
$ul.append($li);
$('<div>').append($ul);

or in one line: $('<div>').append($('<ul>').append($('<li>').text('text')));

demo

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30473

$('<div>').append('<ul>') returns div jQuery object and so on. It is for something called chain of functions. Usually if you write in jQuery $(selector).method(...) it returns object you get by selector, so you can write $(selector).method1(...).method2(...), for example $(selector).css('color', '#555').text('hello') it sets color to the element and then change text into it.

var div = $('<div>');
var ul = $('<ul>').appendTo(div);
var li = $('<li>').text('text').appendTo(ul);

Shortly:

$('<div>').append($('<ul>').append($('<li>').text('text')));

Upvotes: 4

VJAI
VJAI

Reputation: 32768

$('<div>').append($('<ul>').append($('<li>').text('text')));

Upvotes: 1

Related Questions