jQuery .append() function

Question

Why this

$(\"#mydiv\").append(\"
\");
$(\"#mydiv\").append(\"
Hello
\");
$(\"#mydiv\").append(\"
\");
alert($(\"#mydiv\").         


        

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 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.

Answer 3

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