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 ?

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 — Hans Z
– Hans Z, Commented Jun 19, 2012 at 12:47
This will cause invalid markup. List elements (like ul) should contain only li elements inside. — VisioN
– VisioN, Commented Jun 19, 2012 at 12:48
@sp-1986 $("#test-ul").append("<li />"); $("#test-ul").prepend("<li />"); — Hans Z
– Hans Z, Commented Jun 19, 2012 at 12:50

Chuck Norris · Accepted Answer · 2012-06-19 12:50:24Z

4

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.

answered Jun 19, 2012 at 12:50

Chuck Norris

15.2k15 gold badges96 silver badges128 bronze badges

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

4 Comments

Ayman Safadi Over a year ago

@Simon got it first, but your solution is much more elegant! And it has a jsFiddle!.

VisioN Over a year ago

I don't see it is more elegant. It does the same. At least it adds divs with the same class names.

Curtis Over a year ago

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 Over a year ago

accepted because you have chuck norris as your name and the example helped me alot! :)

Curtis · Accepted Answer · 2012-06-19 12:54:02Z

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

edited Jun 19, 2012 at 12:54

answered Jun 19, 2012 at 12:48

Curtis

104k69 gold badges280 silver badges359 bronze badges

Comments

VisioN · Accepted Answer · 2012-06-19 13:04:07Z

1

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

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

edited Jun 19, 2012 at 13:04

VisioN

146k35 gold badges287 silver badges291 bronze badges

answered Jun 19, 2012 at 12:48

Simon

4256 silver badges14 bronze badges

Comments

Terry · Accepted Answer · 2012-06-19 12:51:36Z

0

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);
});

answered Jun 19, 2012 at 12:51

Terry

14.2k9 gold badges58 silver badges84 bronze badges

Comments

NimChimpsky · Accepted Answer · 2012-06-19 12:53:18Z

0

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

answered Jun 19, 2012 at 12:53

NimChimpsky

47.5k61 gold badges202 silver badges319 bronze badges

Collectives™ on Stack Overflow

adding HTML using jquery

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related