jQuery .append() function

Question

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!

Answer 1

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.

Answer 2

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

Answer 3

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.