Jquery append() is not appending as expected

Question

So I have the following div

<div id="object_list">

I want to append a list and items into it. So I run the following jquery

 $("#object_list").empty(); $("#object_list").append('<ul'); $("#object_list").append(list.contents()); $("#object_list").append('</ul>');

After that code runs, #object_list looks like this

<div id="object_list"> <ul></ul> ...list.contents() elements </div>

Even after debugging, if I do another $("#object_list").append('<ul>'); all I get is an added <ul> after the </ul>. Why is jquery not appending to the html AFTER the list.contents(), but is going before it?

Perhaps not as expected, but as documented. jQuery appends a complete element, not literal HTML. — harpo
– harpo, Commented May 16, 2010 at 2:56

BradBrening · Accepted Answer · 2010-05-16 02:54:23Z

The issue is that you keep appending to "object_list" when you are meaning to append items to the list itself. (as an aside, you aren't closing your UL instantiation tag either)

Try something like this:

var $list = $("<ul></ul>"); $list.append("<li>Something 1</li>"); $list.append("<li>Something 2</li>"); $list.append("<li>Something 3</li>"); $("#object_list").append($list);

Scott Christopherson · Accepted Answer · 2010-05-16 02:56:53Z

Append doesn't simply append tags, it actually appends elements. In your case you want to append list items to an unordered list that gets appended to your div.

Do:

$('<ul>').appendTo('#object_list').append(list.contents());

Collectives™ on Stack Overflow

Jquery append() is not appending as expected

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related