How to add <li> using javascript?

Question

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>

possible duplicate of jQuery: how to add <li> in an existing <ul>? — Jørn Schou-Rode
– Jørn Schou-Rode, Commented May 27, 2010 at 22:54

Ken Redler · Accepted Answer · 2010-05-27 05:17:40Z

4

$(document).ready( function(){
    $('ul#nav').append('<li><a href="#header">Back to top</a></li>');
}

answered May 27, 2010 at 5:17

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

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

3 Comments

Ken Redler Over a year ago

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.

Jitendra Vyas Over a year ago

but i'm getting this error in console "ReferenceError: append is not defined { message="append is not defined", more...}"

Ken Redler Over a year ago

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).

Anurag · Accepted Answer · 2010-05-27 05:18:37Z

4

Use the append function.

$("#nav").append('<li><a href="#header">Back to top</a></li>');

answered May 27, 2010 at 5:18

Anurag

142k37 gold badges223 silver badges262 bronze badges

2 Comments

Ken Redler Over a year ago

Like in baseball, two outfielders yelling "I got it!" on an easy pop fly.

Jitendra Vyas Over a year ago

one more +1 for jsFiddle link.

Collectives™ on Stack Overflow

How to add <li> using javascript?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related