我必须用jquery.append（）指定endding标签吗？

Question

I am studying somebody else jquery script, and I noticed he is opening a tag without closing it, but it also seems that browsers does not care (Not yet tested with IE)

it is written :

$('#mydiv').append('<ul>')

But there is nowhere a

.append('</ul>')

The script does not close the list, but browsers do it automatically (I just did an 'inspect element' in the browser).

Is that a 'legal' behavior, or one should always close a tag in a javascript autogenerated content ?

Answer 1

To do it properly, you should be appending:

$('#mydiv').append('<ul></ul>')

Yes browsers will handle it (specifically the .innerHTML implementation handles it, not jQuery), at least the major ones, but why not be safe in all cases and use valid markup?

$('#mydiv').append('<ul>')

... still calls .innerHTML , not createElement , only in $('<ul>') is document.createElement() called. As I said originally, the browser handles it with .append() , not jQuery and not document.createElement (which doesn't take syntax like this anyway).
You can see test/play with what I mean here

Answer 2

Short answer: you should.

Long answer that lead to the short answer:

When you say .append('<ul>') ,
or even .append('<ul></ul') , behind the scenes jQuery calls document.createElement and the browser knows what to do.

It's not like jQuery actually puts that string of HTML anywhere, but rather parses it and creates the necessary DOM elements

UPDATE- As Nick pointed out, this might not always be the case. Relevant source: init If you pass it just ul , it just calls createElement . If the html string is more complicated, it will go into buildFragment which is more complicated than that.

Based on this, I would say the best/fastest way to create a single element thru jQuery, is to do something like

$('<ul>').appendTo($target);

UPDATE 2- So apparently jQuery only calls createElement in some methods, but append ends up calling clean which has a regex that closes tags. So either way, you're safe, jQuery saves you as usual. Relevant source:

...

} else if ( typeof elem === "string" ) {
  // Fix "XHTML"-style tags in all browsers
  elem = elem.replace(rxhtmlTag, "<$1></$2>");

  ...

UPDATE 3- So it turns out jQuery doens't fix anything for you when you call append , and it just injects the string into a temporary div element. Seems like most browsers know how to deal with the HTML even if not closed properly, but to be save it's probably best to close it yourself! Or if you're feeling lazy, do something like .append($('<ul>')) which doesn't use innerHTML