I knew there was a good reason I use $( '<div/>' ) One of those things I learn then forget why I'm doing it. I've apparently not being following styling guidelines ;-)
This is not flame war worthy. This is not about performance it simply causes problems in IE as Daniel points out. Let's just change the documentation to recommend $( '<div/>' ) and close this discussion or risk my wrath of restarting an inline styles conversation :P On Tue, Aug 28, 2012 at 8:55 AM, Ryan Kaldari <[email protected]>wrote: > 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_elements<https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Creating_elements> >> 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#14737000000469433> >> https://forum.jquery.com/**topic/ie-issue-with-append#**14737000000469445<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<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.)) >> > > > ______________________________**_________________ > Wikitech-l mailing list > [email protected] > https://lists.wikimedia.org/**mailman/listinfo/wikitech-l<https://lists.wikimedia.org/mailman/listinfo/wikitech-l> > -- Jon Robson http://jonrobson.me.uk @rakugojon _______________________________________________ Wikitech-l mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/wikitech-l
