adding HTML using jquery

Question

I have a menu:

<ul id="test-ul">
<li>test</li>
<li>test2</li>
</ul>

How do i add the following HTML markup before the first li and after the last li:

 <li class="first">
 <img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15" />
 </li>
<li class="last">
 <img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15" />
 </li>

using jquery ?

• Hans Z: You should use the jquery append method to $("#test-ul") to add to the end, and the jquery prepend method to $("#test-ul") to add to the beginning: api.jquery.com/append api.jquery.com/prepend
• SOLDIER-OF-FORTUNE: I saw that apend does work but isnt it slow?
• VisioN: This will cause invalid markup. List elements (like ul) should contain only li elements inside.
• SOLDIER-OF-FORTUNE: ok how can i add an extra li?
• Hans Z: @sp-1986 $("#test-ul").append("<li />"); $("#test-ul").prepend("<li />");

Answer 1

This isn't valid syntax to add div in ul tag. But to undeerstand concept of adding html via Jquery, here you go

var str = '<div class="first"><img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15" /></div><div class="last"><img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15" /></div>';
$("#test-ul").append(str).prepend(str);​​​​​​​​

You can see Jsfiddle example here.

• Ayman Safadi: @Simon got it first, but your solution is much more elegant! And it has a jsFiddle!.
• VisioN: I don't see it is more elegant. It does the same. At least it adds divs with the same class names.
• Curtis: On second thoughts I think this might not be quite what the OP is after. I think the OP would wants the first element before the lis and the last element after the lis
• SOLDIER-OF-FORTUNE: accepted because you have chuck norris as your name and the example helped me alot! :)

Answer 2

You shouldn't add these elements before and after li. Any element other than li nested in a ul is invalid HTML.

You could however add the content within a new li, this would be valid.

​$(function(){
 var $li = $("<li></li>");
 $li.html("html code...");
 $("#test-ul").append($li);
 var $li2 = $("<li></li>");
 $li2.html("different html code..");
 $("#test-ul").prepend($li2); 
});​

SEE EXAMPLE

Answer 3

$("#test-ul").append("html here"); // after the last li
$("#test-ul").prepend("html here"); // before the first

Answer 4

If you want to create a new LI for each, this would work. Be aware if you add more divs it will cause issues.

$('div').each(function() {
 var newli = $(this).html().wrap('<li></li>');
 $('#test-ul').append(newli);
});

Answer 5

var first = '<li<img src="/sosmck.jpg" width="27" height="15" /></li>';
var last = '<li><img src="/sosmck.jpg" width="27" height="15" /></li>';
var myItems = $("li");
myItems.prepend(first);
myItems.append(last);