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 <daniel(a)nadir-seen-fire.com> wrote:
Either way $( '<div>' ) is NOT something
officially supported by jQuery [..]
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 <tstarling(a)wikimedia.org> 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 <csteipp(a)wikimedia.org> wrote:
On Mon, Aug 27, 2012 at 4:37 PM, Mark Holmquist
<mtraceur(a)member.fsf.org> 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 <rkaldari(a)wikimedia.org> wrote:
In that case, perhaps we should just say that all of
the options are fine:
$( '<div>' )
$( '<div/>' )
$( '<div></div>' )
Indeed[5].
On Aug 28, 2012, at 2:50 AM, Daniel Friesen <daniel(a)nadir-seen-fire.com> wrote:
If you don't like the XHTML-ish shortcut that
jQuery provides, then our 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…