javascript - Make .appendTo() apply to First Element? - Stack Overflow

I have this code:

<ul id="hello">
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
</ul>

and this Script:

$("<label>The First item</label>").appendTo($('ul#hello li'));

How can I make it so that the .appendTo() function only applies to the first list item.

I've tried the :first-child selector but it doesn't seem to work.

Any help is appreciated.

I have this code:

<ul id="hello">
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
</ul>

and this Script:

$("<label>The First item</label>").appendTo($('ul#hello li'));

How can I make it so that the .appendTo() function only applies to the first list item.

I've tried the :first-child selector but it doesn't seem to work.

Any help is appreciated.

• javascript
• jquery
• appendto

Share Improve this question Follow asked Aug 24, 2011 at 14:23 shahmeer navidshahmeer navid 23511 gold badge55 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

$("<label>The First item</label>").appendTo($('#hello li:first'));

$("<label>The First item</label>").appendTo($('#hello li').first());

Note: .first() should be a tad faster than :first. Also see: jQuery :first vs. .first()

$('#hello li:first').append('<label>The First item</label>');

or

$('#hello').find('li:first').append('<label>The First item</label>');

or

$('<label>The First item</label>').appendTo($('#hello').find('li:first'));

DEMO