Hence, I think we should change our coding conventions to always use `$( '<div />' )`.

$( '<div>' ) is the way to go.

If you don't like the XHTML-ish shortcut that jQuery provides, then our coding conventions should be to use `$( '<div></div>' );`. Either way $( '<div>' ) is NOT something officially supported by jQuery and makes it easy for developers to accidentally write broken code.

On 28/08/12 09:26, Daniel Friesen wrote: The performance special case supports both <div> and <div/>: rsingleTag = /^<(\w+)\s*\/?>$/, ... ret = rsingleTag.exec( selector ); if ( ret ) { selector = [ doc.createElement( ret[1] ) ];

I think that we should use that special case, and then extend the resulting elements with attr() rather than hitting the innerHTML case. When you specify longer HTML fragments as strings, they tend to get polluted with user input, leading to XSS.

But it's important to establish conventions which lead the developer down a path where they're less likely to run into trouble, even if they do try to take a few shortcuts. So let's add the slash. (There is one important case where it's good to use innerHTML: when there are thousands of elements to create in a batch.) -- Tim Starling

I still can't believe the high-level jQuery answer after all these years to "Select a div with an id provided by the user" is "Use `$( "div#" + userInput )` and hope there are no special characters. Or find some way to escape it yourself." when low-level dom can just query by ID and there is no reason for jQuery to force people to express everything in querys they parse when they could actually declare portions of a query with object notations.

Personally, I would use document.getElementById() to do that. It's standard, and it's faster and more secure.

I ran into our coding conventions for creating elements in JS: https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Creatin… 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.))

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 ;-)

I ran into our coding conventions for creating elements in JS: https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Creatin… var $hello = $('<div>').text( 'Hello' ); // Not '<div/>' // Not '<div></div>' This looks like some really bad advice.

Rob is correct that using addClass is the preferable way to go for classes, and attr is the preferable way to go for other attributes. They are both are safe since they use setAttribute internally which escapes the values.

jQuery internally maps '<tagName>' to document.createElement( 'tagName' ). This is a feature, and is used throughout jQuery internally. It's not very well documented as such, but Timo is adding it to the documentation as to resolve the confusion around this. $( '<div>' ) is a shortcut added to jQuery for our convenience, and I think it's reasonable to use it.

Timo where are you ? +1 .addClass as it directly manipulates the .className property. On Aug 28, 2012, at 10:52 AM, Trevor Parscal wrote: _______________________________________________ Wikitech-l mailing list Wikitech-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l

In that case, perhaps we should just say that all of the options are fine: $( '<div>' ) $( '<div/>' ) $( '<div></div>' ) but emphasize not to use attributes in the tag creation.

wrote:

That's an unintentional side effect. jQuery does not officially support $( '<div>' ) without a closing </div> or />.

Okay, sorry for being away for 30 minutes while I enjoyed dinner. Someone[1] pointed me to this thread and suggested I chime in, so here I go. On Aug 28, 2012, at 2:50 AM, Daniel Friesen &lt;daniel(a)nadir-seen-fire.com&gt; wrote: [..] This is simply incorrect. * It has been explicitly supported (whether or not intentionally/officiallt) by jQuery for years as can be seen in the source code. * It has been used by jQuery core and other jQuery project for years (not just sporadically, but pretty much everywhere, consistency). And I'm happy to announce that as of today, by popular demand, the jQuery team has finally updated[4] the 3-year old documentation to reflect this feature. Up until now the documentation for the root jQuery() function still reflected the situation as it was 3 years ago. Where the string always had to be fully valid with closing tag, with the exception of <input> and <img/> because the native parsers in the browsers supported it that way (not because jQuery wanted us to). But for a while now jQuery features element creation through the native createElement() by passing a single <tag> ("with optional closing tag or quick-closing"[2]). As such I've reverted this edit[3]. On Aug 28, 2012, at 9:57 AM, Tim Starling &lt;tstarling(a)wikimedia.org&gt; wrote: > Personally, I would use document.getElementById() to do that. It's > standard, and it's faster and more secure. More complex selectors > derived from user input can be replaced with jQuery.filter() etc. with > no loss of performance. > -- Tim Starling Indeed. Moreover, aside from the performance and security, there's another important factor to take into account. And that is the fact that IDs can contain characters that have special meaning in CSS selectors (such as dots). We've seen this in before when dealing with a MediaWiki heading (where the ID-version of the heading can (or could) contain dots). So whenever you have what is supposed to be an element ID in a variable, use document.getElementById (even if you don't care about performance or security). On Aug 28, 2012, at 6:39 AM, Chris Steipp &lt;csteipp(a)wikimedia.org&gt; wrote: wrote: >> I also tried to get an answer about the better between $( '<div >> class="a-class" />' ) and $( '<div />' ).addClass( 'a-class' ), but >> apparently there's little difference. At least when creating dynamic >> interfaces, I'd like to have some guidance and consistency if anyone is >> interested in chatting about it. > I'm going to try and put some guidelines for secure javascript code > together soon, but it's a much better habit to use .addClass( > 'a-class' ) and the other functions to add attributes. I'm looking forward to that. Note that it is perfectly fine and secure to use: $( '<div class="a-class"></div>' ); But when working with variables (whether from user input or not), then methods like addClass should be used instead. Both for security as well as predictability: $( '<div class="' + someVar + '"></div>' ); // Bad If the variable contains any unexpected characters it can for example cause the jQuery object to be a collection of 2 or 3 elements instead of 1. On Aug 28, 2012, at 8:00 PM, Ryan Kaldari &lt;rkaldari(a)wikimedia.org&gt; wrote: fine: > $( '<div>' ) > $( '<div/>' ) > $( '<div></div>' ) Indeed[5]. On Aug 28, 2012, at 2:50 AM, Daniel Friesen &lt;daniel(a)nadir-seen-fire.com&gt; wrote: coding conventions should be to use `$( '<div></div>' );`. I agree we shouldn't use XHTML-ish shortcuts because it looks confusing: $('<ul><li/></ul>'); That works because jQuery converts <tag/> to <tag></tag>. But just because jQuery allows that doesn't mean we should do it. I'd recommend we keep it simple and always use valid HTML syntax when writing HTML snippets for parsing. Either use the <tag> syntax to create a plain element, or use fully valid XML/HTML syntax (with no shortcuts) for everything else. -- Timo [1] Well, actually, almost a dozen someones. [2] http://api.jquery.com/jQuery/?purge=1#jQuery2 [3] https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJ… [4] https://github.com/jquery/api.jquery.com/commit/ea8d2857cd23b2044948a15708a… [5] https://www.mediawiki.org/w/index.php?title=Manual%3ACoding_conventions%2FJ… _______________________________________________ Wikitech-l mailing list Wikitech-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l

On 28 August 2012 02:26, Daniel Friesen &lt;daniel(a)nadir-seen-fire.com&gt; wrote: The very reason I and others have been killing '<div/>' with fire is that I was told it doesn't work in IE. Can you explain what is going on?

Personally I don't like '<div/>' because there is no such thing in html. I could understand '<div>' as a shortcut for creating a div element. Unless the issue is clarified, I think that recommending to always use valid html like <div></div> seems a much better option than either of <div> or <div/>.

-Niklas

Basically $( '<span class="foo">' ) will break completely in IE7/IE8.

It's important to note however that IE required that input and button >tags are created with a type (if they are going to have a specific one) $( '<input type="password">', { 'class', 'example' } );

By the way, you can also use $( '<div/>', { 'class': 'foo', 'title': 'myTitle', ... } );