CODEWITHSUNDEEP
jquery
Misha Moroshko
Misha Moroshko

Reputation: 171341

jQuery .append() function

Why this 

$("#mydiv").append("<ul>");
$("#mydiv").append("<li>Hello</li>");
$("#mydiv").append("</ul>");
alert($("#mydiv").html());

produces

<ul></ul><li>Hello</li>

and not

<ul><li>Hello</li></ul>

?

Thanks!

Upvotes: 2

Views: 1125

Answers (3)

RoToRa
RoToRa

Reputation: 38400

Because the browser needs to (re)build its DOM after each append. It can't know that a closing tag will come later, and an opening tag by itself is invalid, so error correction kicks in which in this case closes the unclosed element.

This is one of the reasons why innerHtml and things that rely on it (such as jQuery's append method) are not reliable and should be avoided when possible.

Upvotes: 2

Juriy
Juriy

Reputation: 5111

Because you can't append the unfinished pieces of HTML, you always append the element. For your case you have do either

$("#mydiv").append("<ul></ul>");
$("#mydiv ul").append("<li>Hello</li>");

or

$("#mydiv").append("<ul><li>Hello</li></ul>");

Upvotes: 2

richardtallent
richardtallent

Reputation: 35374

Append() appends DOM nodes, not HTML tags (i.e., it's an object append, not a string append).

When you append <ul>, you are creating an entire UL node, with both start and end tags. The </ul> call is ignored.

Upvotes: 7

Related Questions