Comments on: Is invalid code created through JavaScript ok? http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/ Web development and Internet trends Fri, 05 Dec 2008 11:06:43 +0000 http://wordpress.org/?v=2.6.1 By: Robert Nyman http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42606 Robert Nyman Thu, 15 Mar 2007 08:11:18 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42606 Andy, Definitely, it's all about context. Goulven, Most definitely, if manipulating the DOM by adding new elements, make sure it's always properly structured. Andy,

Definitely, it’s all about context.

Goulven,

Most definitely, if manipulating the DOM by adding new elements, make sure it’s always properly structured.

]]> By: Goulven http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42515 Goulven Wed, 14 Mar 2007 20:48:56 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42515 Watch out for illegal DOM manipulations though. From personal experience, invalid code can sometimes behave unexpectedly. I once tried to append TRs to a TABLE unsuccessfully -because a TR only belongs in a THEAD, TFOOT or TBODY. Just my 2c... Watch out for illegal DOM manipulations though. From personal experience, invalid code can sometimes behave unexpectedly.

I once tried to append TRs to a TABLE unsuccessfully -because a TR only belongs in a THEAD, TFOOT or TBODY.

Just my 2c…

]]> By: Andy http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42334 Andy Tue, 13 Mar 2007 21:42:27 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42334 Well, to me it's a question of compliance. I tend to follow the standards in first hand but in some cases other methods seem more feasible (I'm not necessarily speaking of HTML here). Depending on the task, i tend to take different actions. Say, inserting content from a remote webpage, .innerHTML is the way to go. When adding elements that's to be manipulated later, I'll use the DOM construction. Well, to me it’s a question of compliance. I tend to follow the standards in first hand but in some cases other methods seem more feasible (I’m not necessarily speaking of HTML here). Depending on the task, i tend to take different actions. Say, inserting content from a remote webpage, .innerHTML is the way to go. When adding elements that’s to be manipulated later, I’ll use the DOM construction.

]]> By: Robert Nyman http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42243 Robert Nyman Tue, 13 Mar 2007 09:10:30 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42243 Ok, my old tired eyes got some help, and the wrong semicolons should have been removed. Please let me know if I missed some... :-) Ok, my old tired eyes got some help, and the wrong semicolons should have been removed. Please let me know if I missed some… :-)

]]> By: Robert Nyman http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42228 Robert Nyman Tue, 13 Mar 2007 07:56:59 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42228 Wow, great responses! Sebastian, That's actually spot on. If we look beyond IE's implementation, it's two completely different actions. Very well put. And, I'm nor sure if I have a seeing problem, but I can't find the stray semicolons. Would you be nice and give me a hint? :-) Jens, Well, to me, it's about structure and performance. Valid code should never hinder us, but help us write good code. If a solution is the best, but invalid, I'd go for it any day. Morgan, Oh, definitely. It depends on the context, and object packaging is very often a very nice and good way to go. Wow, great responses!

Sebastian,

That’s actually spot on. If we look beyond IE’s implementation, it’s two completely different actions. Very well put.

And, I’m nor sure if I have a seeing problem, but I can’t find the stray semicolons. Would you be nice and give me a hint? :-)

Jens,

Well, to me, it’s about structure and performance. Valid code should never hinder us, but help us write good code. If a solution is the best, but invalid, I’d go for it any day.

Morgan,

Oh, definitely. It depends on the context, and object packaging is very often a very nice and good way to go.

]]> By: Tanny O'Haley http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42176 Tanny O'Haley Tue, 13 Mar 2007 00:27:29 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42176 I always use option 4. You are adding an object to the DOM element, not an attribute, therefore it is not invalid. I always use option 4. You are adding an object to the DOM element, not an attribute, therefore it is not invalid.

]]> By: Stefan Van Reeth http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42160 Stefan Van Reeth Mon, 12 Mar 2007 22:13:08 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42160 Hi Robert, Sebastian gava a correct reply, so I won't repeat that. On the other hand, I do firmly agree with your viewpoint that option 4 is the best practice. Altough I tend to use option 3 regulary too. But I can't say I have a fixed rule for this: it's more a decision based on what feels good depending on the situation. About the semicolons: copy/paste can be a real bitch in cases like this, no ;)? Easely missed, and I've done far worse before... Hi Robert,

Sebastian gava a correct reply, so I won’t repeat that. On the other hand, I do firmly agree with your viewpoint that option 4 is the best practice. Altough I tend to use option 3 regulary too. But I can’t say I have a fixed rule for this: it’s more a decision based on what feels good depending on the situation.
About the semicolons: copy/paste can be a real bitch in cases like this, no ;)? Easely missed, and I’ve done far worse before…

]]> By: Aaron Bassett http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42153 Aaron Bassett Mon, 12 Mar 2007 22:00:53 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42153 As other people have pointed out already there is nothing 'invalid' about it. But if you were really concerned you could add the attributes into a custom DTD and reference it in your doctype. Ok so it won't be valid XHTML 1.0 Strict, it'll be valid something else. But hey valid is valid ;) As other people have pointed out already there is nothing ‘invalid’ about it. But if you were really concerned you could add the attributes into a custom DTD and reference it in your doctype.

Ok so it won’t be valid XHTML 1.0 Strict, it’ll be valid something else. But hey valid is valid ;)

]]> By: Morgan Roderick http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42150 Morgan Roderick Mon, 12 Mar 2007 21:31:56 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42150 Hmm, for the most part, i try to avoid relying on the DOM to do my bidding, preferring objects to package stuff. <code> myobject = { myItems = []; } </code> This does add more code, but allows me to keep cached references to nodes and collections, and wraps most of my functionality in a way that doesn't usually class with third-party code (or even code I write myself). Inspired by the work of Christian Heilman (<a href="http://icant.co.uk/sandbox/eventdelegation/" rel="nofollow">http://icant.co.uk/sandbox/eventdelegation/</a>) , I've done some work on a recent project, using event delegates instead of event listeners. This works very well, especially for generated / ajaxed content, where you don't really want to clutter it up with inline event listeners, and we all know what a pain IE can be, when trying to manipulate DOM with content inserted with innerHTML (which is another MS innovation, that's off the plantation, but very handy). Ironically enough, MS created innerHTML and yet IE has the poorest implementation. So, I guess my approach goes kindof between the options outlined, since I try to keep references to ancestor elements, and have them deal with the events, instead of repeating the same event listeners over and over and over again. This scales really well, and Chris, if you're listening, GREAT WORK! You really inspired me (see Mommy, I am not harsh all the time ;-) ) Hmm, for the most part, i try to avoid relying on the DOM to do my bidding, preferring objects to package stuff.

myobject = {
myItems = [];
}

This does add more code, but allows me to keep cached references to nodes and collections, and wraps most of my functionality in a way that doesn’t usually class with third-party code (or even code I write myself).

Inspired by the work of Christian Heilman (http://icant.co.uk/sandbox/eventdelegation/) , I’ve done some work on a recent project, using event delegates instead of event listeners. This works very well, especially for generated / ajaxed content, where you don’t really want to clutter it up with inline event listeners, and we all know what a pain IE can be, when trying to manipulate DOM with content inserted with innerHTML (which is another MS innovation, that’s off the plantation, but very handy).

Ironically enough, MS created innerHTML and yet IE has the poorest implementation.

So, I guess my approach goes kindof between the options outlined, since I try to keep references to ancestor elements, and have them deal with the events, instead of repeating the same event listeners over and over and over again. This scales really well, and Chris, if you’re listening, GREAT WORK!

You really inspired me (see Mommy, I am not harsh all the time ;-) )

]]> By: Roger Johansson http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42135 Roger Johansson Mon, 12 Mar 2007 19:40:04 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42135 What others have already said: option 4 does not create invalid HTML. Had you used setAttribute(), however... ;). What others have already said: option 4 does not create invalid HTML. Had you used setAttribute(), however… ;).

]]> By: Jens Meiert http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42134 Jens Meiert Mon, 12 Mar 2007 19:33:50 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42134 Sorry - <em>no</em>, why should it? (It's yet one of the reasons why I <a href="http://meiert.com/de/publications/articles/20050513/#sifr" rel="nofollow">dissuade from using sIFR</a>.) Sorry - no, why should it? (It’s yet one of the reasons why I dissuade from using sIFR.)

]]> By: Remy Sharp http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42130 Remy Sharp Mon, 12 Mar 2007 18:53:58 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42130 I would, and have been going with option 4. My view is that I'm not touching the parts DOM that affect the rendered output of the page, or the HTML that's used to validate the page. I'm simply extending the DOM. Similarly, browsers extend the DOM in their own way. If you take a look at any INPUT element using <a href="http://getfirebug.com" rel="nofollow">Firebug</a> and Firefox 2 and you'll see the 'spellcheck' property attached. I would, and have been going with option 4.

My view is that I’m not touching the parts DOM that affect the rendered output of the page, or the HTML that’s used to validate the page. I’m simply extending the DOM.

Similarly, browsers extend the DOM in their own way. If you take a look at any INPUT element using Firebug and Firefox 2 and you’ll see the ’spellcheck’ property attached.

]]> By: Cheat Codes » Is invalid code created through JavaScript ok? http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42107 Cheat Codes » Is invalid code created through JavaScript ok? Mon, 12 Mar 2007 16:25:32 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42107 [...] JavaScript. By doing some DOM manipulation, you can create great … Original post by Robert Nyman and plugin by Elliott Back [...] [...] JavaScript. By doing some DOM manipulation, you can create great … Original post by Robert Nyman and plugin by Elliott Back [...]

]]> By: Simon Proctor http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42104 Simon Proctor Mon, 12 Mar 2007 16:14:10 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42104 See the way I look at it this is about extending a Javascript Object that just happens to be a DOM Node too. I'd go for your last option every time because it makes sense from a Javascript point of view. It has to be said I hadn't thought about the fact your new attributes aren't valid because if you were do look at the generated code they wouldn't display (being invalid). I'm not explaining myself very well I guess but basically while I don't like new random attributes being added to HTML pages I see no problem in extending any arbitrary Javascript Object as required. See the way I look at it this is about extending a Javascript Object that just happens to be a DOM Node too. I’d go for your last option every time because it makes sense from a Javascript point of view. It has to be said I hadn’t thought about the fact your new attributes aren’t valid because if you were do look at the generated code they wouldn’t display (being invalid).

I’m not explaining myself very well I guess but basically while I don’t like new random attributes being added to HTML pages I see no problem in extending any arbitrary Javascript Object as required.

]]> By: Sebastian Redl http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42103 Sebastian Redl Mon, 12 Mar 2007 16:12:43 +0000 http://www.robertnyman.com/2007/03/12/is-invalid-code-created-through-javascript-ok/#comment-42103 There's nothing invalid about option 4. There is a difference between HTML attributes, which are strictly defined, and properties of the DOM node, which are not strictly defined. Let's look at the three standards concerned: HTML, DOM (Core and HTML) and ECMAScript. From the viewpoint of HTML, adding an attribute that is not specified is an error. From the viewpoint of ECMAScript, an object is completely dynamic, and you can add whatever properties to that you want. From the viewpoint of the DOM, there are some predefined properties that map directly to HTML attributes. Setting these properties also sets the corresponding attributes, and if the attribute changes through any other means, the property changes as well. However, the DOM makes no statement at all about properties that it doesn't define, which means that JavaScript should fall back to simple ECMAScript behaviour. In other words, setting an arbitrary property of a DOM node does not mean that you set any attribute of the element. In particular, calling linkElm.getAttribute("elementsToExpand") in your code above should return null. No setting of element attributes -> no possible violation of the HTML standard -> no invalid code. q.e.d. The only exception is Internet Explorer, which doesn't understand the difference between element attributes and node properties. But worrying about code doing invalid things when processed under invalid rules is stupid. On a side note, you have a lot of stray semicolons in your code. There’s nothing invalid about option 4. There is a difference between HTML attributes, which are strictly defined, and properties of the DOM node, which are not strictly defined.

Let’s look at the three standards concerned: HTML, DOM (Core and HTML) and ECMAScript.

From the viewpoint of HTML, adding an attribute that is not specified is an error.

From the viewpoint of ECMAScript, an object is completely dynamic, and you can add whatever properties to that you want.

From the viewpoint of the DOM, there are some predefined properties that map directly to HTML attributes. Setting these properties also sets the corresponding attributes, and if the attribute changes through any other means, the property changes as well. However, the DOM makes no statement at all about properties that it doesn’t define, which means that JavaScript should fall back to simple ECMAScript behaviour.

In other words, setting an arbitrary property of a DOM node does not mean that you set any attribute of the element. In particular, calling linkElm.getAttribute(”elementsToExpand”) in your code above should return null.

No setting of element attributes -> no possible violation of the HTML standard -> no invalid code. q.e.d.

The only exception is Internet Explorer, which doesn’t understand the difference between element attributes and node properties. But worrying about code doing invalid things when processed under invalid rules is stupid.

On a side note, you have a lot of stray semicolons in your code.

]]>