[jQuery] Re: XHTML or HTML when creating elements?
On Sep 25, 2009, at 11:56 AM, Bertilo Wennergren wrote:
Karl Swedberg wrote:
Internally, jQuery determines whether to use document.createElement
by checking the string against a regular expression:
rsingleTag = /^<(\w+)\s*\/?>$/
Unless I'm missing something, allowing for both syntaxes would be
trivial. Just change the regex to something like this (untested):
rsingleTag = /^<(\w+)\s*\/?>(<\/\w+>)?$/
I think I'll recommend that.
That seems to work.
But event then, in the following case '' is still being
converted to '' (and then passed to innerHTML):
var html = '';
$("#div").html(html);
--
Bertilo Wennergren
Right. I'm pretty sure that's because the html string is handled
differently if it's an argument of a DOM manipulation method
(e.g. .html('function (e.g. $('
If I recall correctly, all of the DOM manipulation methods are run
through the same set of functions before performing their specific
task. While changing '' might not be necessary
for .html(), it is for .wrap(), for example.
--Karl
[jQuery] Re: XHTML or HTML when creating elements?
Karl Swedberg wrote:
Internally, jQuery determines whether to use document.createElement by
checking the string against a regular expression:
rsingleTag = /^<(\w+)\s*\/?>$/
Unless I'm missing something, allowing for both syntaxes would be
trivial. Just change the regex to something like this (untested):
rsingleTag = /^<(\w+)\s*\/?>(<\/\w+>)?$/
I think I'll recommend that.
That seems to work.
But event then, in the following case '' is still being
converted to '' (and then passed to innerHTML):
var html = '';
$("#div").html(html);
--
Bertilo Wennergren
[jQuery] Re: XHTML or HTML when creating elements?
Vincent Robert wrote:
> On Sep 24, 6:33 pm, Bertilo Wennergren wrote:
>> I think I read somewhere that jQuery just passes the
>> code along to the "innerHTML" function of the browser.
>> That would mean that the actual rules are those of the
>> browsers' various implementations of "innerHTML" (whatever
>> those may be...).
Actually, jQuery does some parsing by itself first.
Yes, I had a look at the jQuery code. Fascinating stuff
in there.
The $('') syntax is actually a shortcut to
document.createElement("span"), and yes, the "/" is required here. So $
('') will be faster than $('') which will have to
go through innerHtml.
A ha. Interesting. But, as it seems, if you use
".html('') or ".html(''), they
amount to the same thing, as the first one gets
converted to the second one, and then gets passed
to "innerHTML".
Actually I'm a bit puzzled.
I tried the following six pieces of code:
1.
var html = '';
$("#div").html(html);
2.
var html = '';
$("#div").html(html);
3.
var html = $('');
$("#div").html(html);
4.
var html = $('');
$("#div").html(html);
5.
$("#div").html($(''));
6.
$("#div").html($(''));
In all cases except 3 and 5 what happens is
that '' finally gets passed through
innerHTML. So in 1 and 5 '' is actually
first turned into '', and thus
it would (theoretically) have been more efficient
to write '' in the first place.
I would have expected all six examples to
behave the same, but there are probably
good reasons for the current choices.
(I found out what happened using FireBug
and a few calls to "console.log()" inside
the jQuery code. This was all done in
Firefox, of course...)
--
Bertilo Wennergren
[jQuery] Re: XHTML or HTML when creating elements?
On Sep 25, 2009, at 10:21 AM, Vincent Robert wrote:
Actually, jQuery does some parsing by itself first.
The $('') syntax is actually a shortcut to
document.createElement("span"), and yes, the "/" is required here.
So $
('') will be faster than $('') which will have to
go through innerHtml.
That's right, for now. Still, I can't see any reason why jQuery should
prefer the quick-close syntax ( $('') ) over the other ( $
('') ).
Internally, jQuery determines whether to use document.createElement by
checking the string against a regular expression:
rsingleTag = /^<(\w+)\s*\/?>$/
Unless I'm missing something, allowing for both syntaxes would be
trivial. Just change the regex to something like this (untested):
rsingleTag = /^<(\w+)\s*\/?>(<\/\w+>)?$/
I think I'll recommend that.
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: XHTML or HTML when creating elements?
Actually, jQuery does some parsing by itself first.
The $('') syntax is actually a shortcut to
document.createElement("span"), and yes, the "/" is required here. So $
('') will be faster than $('') which will have to
go through innerHtml.
Regards,
On Sep 24, 6:33 pm, Bertilo Wennergren wrote:
> I think I read somewhere that jQuery just passes the
> code along to the "innerHTML" function of the browser.
> That would mean that the actual rules are those of the
> browsers' various implementations of "innerHTML" (whatever
> those may be...).
[jQuery] Re: XHTML or HTML when creating elements?
On Thu, Sep 24, 2009 at 1:36 PM, Bertilo Wennergren wrote:
>
> The question about "" arose when I was demonstrating
> how the same inline JS example is supposed to look like in HTML
> and in XHTML. When I was changing one version from it's XHTML
> incarnation into an HTML incarnation, removing all the
> ending slashes from "meta" elements etc., I suddenly stopped
> at the included jQuery code that happend to have a piece
> of '.html(" whatever...")' in it, suddenly not knowing
> if I'm supposed to remove that slash or not. I really did not
> know - since I'm quite new to jQuery (being in the process of
> converting from Prototype...). So I had to ask. Sorry about
> all the hairs being split in the process!
Not at all. I think it was a fruitful discussion.
- Richard
[jQuery] Re: XHTML or HTML when creating elements?
Richard D. Worth wrote:
On Thu, Sep 24, 2009 at 12:53 PM, Bertilo Wennergren wrote:
Richard D. Worth wrote:
Best practice, valid HTML, and compatible with XHTML would be
$('#whatever').html('');
$('#whatever').html('');
$('#whatever').html('');
Well, not quite "valid" HTML...
quite valid. See in the below paragraph "That means that '' is valid"
Yes, valid, but valid code for ">", not for "".
Splitting hairs, I know...
If you use "" in an HTML 4.01 page, the validator at
"w3.org" gives a warning with the following explanation:
The sequence can be interpreted in at least two different
ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict,
the '/' terminates the tag '). However, since
many browsers don't interpret it this way, even in the presence of an
HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure
HTML documents and reserve its use solely for those written in XHTML.
That means that "" is valid, but it does not mean what
it was supposed to mean (in HTML 4.01). It means ">"!
Having to ignore this warning is a pain, and that's remedied by HTML5. As I
posted previously, in HTML5 it is allowed (not recommended nor required)
because it's in such common use for compatibility with XHTML.
Quite welcome.
Still, it's not likely that any browser will actually
produce ">" "from $('#whatever').html('')".
But we're talking "best practices" here.
One best practice I have is that any (X)HTML I write should require as
little modification as possible to be made one or the other. The HTML5 spec
and FAQ give me confidence that no useful browser or html parser will do
"the wrong thing" with parsed as text/html,
so it's worth the
potential ease of migration to/from XHTML. If nothing else, it's a best
practice that allows one to read and write HTML and XHTML without having to
remember as much.
Indeed.
The question about "" arose when I was demonstrating
how the same inline JS example is supposed to look like in HTML
and in XHTML. When I was changing one version from it's XHTML
incarnation into an HTML incarnation, removing all the
ending slashes from "meta" elements etc., I suddenly stopped
at the included jQuery code that happend to have a piece
of '.html(" whatever...")' in it, suddenly not knowing
if I'm supposed to remove that slash or not. I really did not
know - since I'm quite new to jQuery (being in the process of
converting from Prototype...). So I had to ask. Sorry about
all the hairs being split in the process!
--
Bertilo Wennergren
[jQuery] Re: XHTML or HTML when creating elements?
On Thu, Sep 24, 2009 at 12:53 PM, Bertilo Wennergren wrote:
>
> Richard D. Worth wrote:
>
> Best practice, valid HTML, and compatible with XHTML would be
>> $('#whatever').html('');
>> $('#whatever').html('');
>> $('#whatever').html('');
>>
>
> Well, not quite "valid" HTML...
>
quite valid. See in the below paragraph "That means that '' is valid"
>
> If you use "" in an HTML 4.01 page, the validator at
> "w3.org" gives a warning with the following explanation:
>
> The sequence can be interpreted in at least two different
> ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict,
> the '/' terminates the tag '). However, since
> many browsers don't interpret it this way, even in the presence of an
> HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure
> HTML documents and reserve its use solely for those written in XHTML.
>
> That means that "" is valid, but it does not mean what
> it was supposed to mean (in HTML 4.01). It means ">"!
>
Having to ignore this warning is a pain, and that's remedied by HTML5. As I
posted previously, in HTML5 it is allowed (not recommended nor required)
because it's in such common use for compatibility with XHTML.
> Still, it's not likely that any browser will actually
> produce ">" "from $('#whatever').html('')".
> But we're talking "best practices" here.
One best practice I have is that any (X)HTML I write should require as
little modification as possible to be made one or the other. The HTML5 spec
and FAQ give me confidence that no useful browser or html parser will do
"the wrong thing" with parsed as text/html, so it's worth the
potential ease of migration to/from XHTML. If nothing else, it's a best
practice that allows one to read and write HTML and XHTML without having to
remember as much.
- Richard
[jQuery] Re: XHTML or HTML when creating elements?
Richard D. Worth wrote:
Best practice, valid HTML, and compatible with XHTML would be
$('#whatever').html('');
$('#whatever').html('');
$('#whatever').html('');
Well, not quite "valid" HTML...
If you use "" in an HTML 4.01 page, the validator at
"w3.org" gives a warning with the following explanation:
The sequence can be interpreted in at least two different
ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict,
the '/' terminates the tag '). However, since
many browsers don't interpret it this way, even in the presence of an
HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure
HTML documents and reserve its use solely for those written in XHTML.
That means that "" is valid, but it does not mean what
it was supposed to mean (in HTML 4.01). It means ">"!
Still, it's not likely that any browser will actually
produce ">" "from $('#whatever').html('')".
But we're talking "best practices" here.
--
Bertilo Wennergren
[jQuery] Re: XHTML or HTML when creating elements?
Best practice, valid HTML, and compatible with XHTML would be
$('#whatever').html('');
$('#whatever').html('');
$('#whatever').html('');
- Richard
On Thu, Sep 24, 2009 at 12:33 PM, Bertilo Wennergren wrote:
>
> Richard D. Worth wrote:
>
> I won't speak to the jQuery documentation, nor jQuery's internal
>> implementation for $(html), only your questions about HTML and XHTML,
>> based
>> on my own knowledge and best practices: [...]
>>
>
> Thanks!
>
> So if I understand your points, the following examples can be called "best
> practices" when using jQuery along with HTML 4.01:
>
> $('#whatever').html('');
> $('#whatever').html('');
> $('#whatever').html('');
>
> Actually I code everthing in XHTML, but I still wondered
> how this is supposed to be done in jQuery in old style HTML.
>
> I think I read somewhere that jQuery just passes the
> code along to the "innerHTML" function of the browser.
> That would mean that the actual rules are those of the
> browsers' various implementations of "innerHTML" (whatever
> those may be...).
>
>
> --
> Bertilo Wennergren
>
[jQuery] Re: XHTML or HTML when creating elements?
Richard D. Worth wrote:
I won't speak to the jQuery documentation, nor jQuery's internal
implementation for $(html), only your questions about HTML and XHTML, based
on my own knowledge and best practices: [...]
Thanks!
So if I understand your points, the following examples can be called
"best practices" when using jQuery along with HTML 4.01:
$('#whatever').html('');
$('#whatever').html('');
$('#whatever').html('');
Actually I code everthing in XHTML, but I still wondered
how this is supposed to be done in jQuery in old style HTML.
I think I read somewhere that jQuery just passes the
code along to the "innerHTML" function of the browser.
That would mean that the actual rules are those of the
browsers' various implementations of "innerHTML" (whatever
those may be...).
--
Bertilo Wennergren
[jQuery] Re: XHTML or HTML when creating elements?
I won't speak to the jQuery documentation, nor jQuery's internal
implementation for $(html), only your questions about HTML and XHTML, based
on my own knowledge and best practices:
*Non-void elements (sometimes called non-empty elements, meaning they can
contain text and child nodes)*
For an empty span element on its own, neither
nor
is technically valid HTML or XHTML, unless you rely on the html parser to
auto-close the element. And the rules for doing that depend on the element,
what follows it, and which html parser is being used (ie, which browser). As
a best practice, I, and the jQuery UI project by convention, always use
as a valid and consistent way to open and close a non-void but initially
empty element. Because many elements have an optional closing tag in html,
according to how browser html parsers behave, many people continue to use
or
and they may never have any problems in any browsers with that, though the
latter is merely an XML-compatible version of the former, not technically
valid XHTML as span is a non-void element. In the case of that (X)HTML being
parsed as html, which is most common, the browser will ignore the slash
inside the opening tag (as if you had specified ) and when it self
closes, it will be as if you had specified
*Void elements (sometimes called empty elements, meaning they cannot contain
text or child nodes)*
Void elements never have a closing tag, and don't require a closing slash in
the tag in HTML, but allow it for compatability with XHTML, which does
require it. See
http://wiki.whatwg.org/wiki/FAQ#Should_I_close_empty_elements_with_.2F.3E_or_.3E.3F
This is a relatively short list of elements (this one from
http://www.elharo.com/blog/software-development/web-development/2007/01/29/all-empty-tags-in-html/#comment-227448
):
area
base
basefont
br
col
frame
hr
img
input
isindex
link
meta
param
the most common ones being img and input. Note it does not include some very
commonly created elements such as
a
div
li
ol
span
table
td
th
tr
ul
- Richard
On Thu, Sep 24, 2009 at 11:30 AM, Bertilo Wennergren wrote:
>
> According to the jQuery documentation we're
> supposed to write like this:
>
> $("")
>
> and not like this:
>
> $("")
>
> http://docs.jquery.com/Core/jQuery#htmlownerDocument
>
> That means using XHTML style code for the
> elements created.
>
> Are we supposed to do that even when we are using
> HTML style code (e.g. HTML 4.01)?
>
> E.g.:
>
> $('#whatever').html('');
>
> That would seem a bit bizarre if the actual HTML
> page has lots of '' without the
> ending slash.
>
> It does seem that "img", "br" etc. work without the
> ending slash as well.
>
> --
> Bertilo Wennergren
>
