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
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.))
_______________________________________________
Wikitech-l mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
