Yes, $( '<div/>' ) or $( '<div></div>' ) is correct here, not $( '<div>' ). jQuery specifically states this in their documentation, and you'll run into problems in IE if you use the other form (as Neil discovered while writing UploadWizard). Not sure why this is flame-war worthy. Seems pretty straightforward to me, especially if you're in the habit of writing XHTML.
Ryan Kaldari
On 8/27/12 4:26 PM, Daniel Friesen wrote:
I ran into our coding conventions for creating elements in JS: https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Creating...
var $hello = $('<div>').text( 'Hello' ); // Not '<div/>' // Not '<div></div>'
This looks like some really bad advice.
This dates back to an issue I ran into with jQuery 3 years ago: https://forum.jquery.com/topic/ie-issue-with-append#14737000000469433 https://forum.jquery.com/topic/ie-issue-with-append#14737000000469445 Basically $( '<span class="foo">' ) will break completely in IE7/IE8.
jQuery supports /> on all elements (eg: $( '<span class="foo" />' )) intentionally. It does internal replacements to support it as a syntax for specifying elements. But besides that special case jQuery wants anything passed to it to be valid markup. It just leaves the parsing of it up to the browser and all the quirks the browser may have. jQuery does special case attribute-less $( '<div />' ) but this is a performance enhancement. The fact that $( '<div>' ) does not break in IE7/IE8 is an unintentional side effect of jQuery's lazy support of special cases like $( '<img>' ) where the tag is self closing and the browser will not require a /. This is the ONLY case where jQuery intentionally supports leaving out a closing tag or a self-closing /.
When devs consider `$( '<div>' )` ok they typically believe that `$( '<div class="foo">' )` should be ok to. It looks like a special cased way to define an element, attributes et. all. However the former is a performance enhancement side effect, and the later while it will look like it works in Chrome and Firefox actually relies entirely on quirky error correction behavior which differs between engines and breaks in IE7/IE8 engine.
The jQuery documentation also does not state that `$( '<div>' )` for non-selfclosing elements is supported: http://api.jquery.com/jQuery/#jQuery2
Hence, I think we should change our coding conventions to always use `$( '<div />' )`.
((And for anyone that suggests that developers should know they should add a / or </div> to <div> when they add any attributes to it. I bring up the fact that our code style requires {} blocks and does not allow implicit `if ( foo ) foo();`. This is the same thing.))