views:

70

answers:

2

I want to add one more li at last but using JavaScript/jQuery

for example i want to add this li at last <li><a href="#header" >Back to top</a></li>

<ul id="nav">
    <li><a href="#nowhere" >Lorem</a></li>
    <li><a href="#nowhere" >Aliquam</a></li>
    <li><a href="#nowhere" >Morbi</a></li>
    <li><a href="#nowhere" >Praesent</a></li>
    <li><a href="#nowhere" >Pellentesque</a></li>
        Here i want to add one more li using javascript
</ul>
+2  A: 
$(document).ready( function(){
    $('ul#nav').append('<li><a href="#header">Back to top</a></li>');
}  
Ken Redler
+1 Thanks. do you know how to test this using firebug?
metal-gear-solid
Assuming you have your HTML all set, including the jQuery library, you can test it interactively by typing just the actual append() line into the firebug command line. Once it works the way you want, paste the block as above into a <script> block in your <head> area.
Ken Redler
but i'm getting this error in console "ReferenceError: append is not defined { message="append is not defined", more...}"
metal-gear-solid
If you've got firebug, your HTML looks as it does in your question, and you are linking to a copy of jQuery, pasting this into the firebug command line: $("#nav").append('<li><a href="#header">Back to top</a></li>'); and hitting Return will work (just tried it).
Ken Redler
ok it's working now thanks
metal-gear-solid
+3  A: 

Use the append function.

$("#nav").append('<li><a href="#header">Back to top</a></li>');
Anurag
Like in baseball, two outfielders yelling "I got it!" on an easy pop fly.
Ken Redler
+1 for the jsFiddle link.
Ken Redler
haha.. like the analogy :)
Anurag
one more +1 for jsFiddle link.
metal-gear-solid