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 <rkaldari(a)wikimedia.org>wrote;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&l…
https://forum.jquery.com/**topic/ie-issue-with-append#**14737000000469445&l…
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/#jQ…
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
Wikitech-l(a)lists.wikimedia.org
https://lists.wikimedia.org/**mailman/listinfo/wikitech-l<https://lists.…