3

Possible Duplicate:
jQuery: how to add <li> in an existing <ul>?

I have a <UL> which contains a list of <LI>. What I am looking at is on an event to add a new <LI> item as the first element on the <UL>. Can you please advice on how I can acheive this using jquery.

Example:

<UL>
   <LI>First Item</LI>
   <LI>Second Item</LI>
   <LI>Third Item</LI>
   <LI>Fourth Item</LI>
</UL>

on click of a button, i will need to add a new LI element as the first element in the UL, which would look like the below

<UL>
   <LI>New Item is here</LI>
   <LI>First Item</LI>
   <LI>Second Item</LI>
   <LI>Third Item</LI>
   <LI>Fourth Item</LI>
</UL>
Community
  • 1
  • 1
Abishek
  • 11,191
  • 19
  • 72
  • 111

2 Answers2

4
$("ul").prepend("<li>New Item is here</li>");
Daniel O'Hara
  • 13,307
  • 3
  • 46
  • 68
1
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script language="javascript">
function example_append() {
   $("ul").prepend("<li>New Item is here</li>");
}
</script>
<input type="button" value="Append" onclick="example_append()" /><br/>
<ul>
   <LI>First Item</LI>
   <LI>Second Item</LI>
   <LI>Third Item</LI>
   <LI>Fourth Item</LI>
</ul>

Live Example @ http://jsfiddle.net/XNyJz/2/

Pedro Lobito
  • 94,083
  • 31
  • 258
  • 268