Comments on: Graft: Making Javascript DOM a Piece of Cake

By: JavaScript DOM - einfach mit "graft()" - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)

Sun, 29 Oct 2006 21:05:22 +0000

[...] AW: JavaScript DOM – einfach mit "graft()" – Heute, 23:05 Die Jungs von Ajaxian haben auch ein Feature davon: Ajaxian » Graft: Making Javascript DOM a Piece of Cake check mein weblog [...]

By: Hugo Wetterberg

Hugo Wetterberg — Thu, 19 Oct 2006 08:57:38 +0000

Ah, well, Roy I really disagree with you, there is no reason to go through Concatenation Hell everytime content is generated. But the route that Scott is also a viable one in many situations.

By: Graft method on Ajaxian » Blog Archive » Good Old Tech

Graft method on Ajaxian » Blog Archive » Good Old Tech — Thu, 19 Oct 2006 08:26:46 +0000

[...] Ajaxian.com has made a post about a method by schadenfreunde with the rather brutal-sounding name “graft”, makes me think of skin grafts and other such generally unpleasant things, but maybe that’s just me. [...]

By: Roy

Roy — Thu, 19 Oct 2006 06:14:22 +0000

Well I agree that web standards zealots will wet their pants for this.
This is like their wet dreams come true.

As for me, I will stick to my quick and nimble InnerHTML.
I agree with Scott that anything that involves creating a whole chunk of HTML using JS is just ridiculous. I’ve been through that to fit in to the web standards crowd and to impress geeks, it wasn’t long before I dumped it and said “Screw it. I wanna get real Yo!!! “.

By: Sam Foster

Sam Foster — Thu, 19 Oct 2006 03:55:36 +0000

@carmen – if you’re writing your JSON by hand and worrying about escape characters I think you’ve missed the point.

I can see the utility of this kind of thing if you didn’t want to import a whole library just to get scriptaculous’ Builder.node, or dojo’s widget templates, or whatever… Trouble is, by the time you’ve figured out you’ve got memory leaks, need a good way to hook up event handlers, need some fx to notify your users of the change and so on .. well it turns out you do need the whole library after all.

By: Michael Geary

Michael Geary — Thu, 19 Oct 2006 01:27:40 +0000

And here's yet another version of the same thing, also from a few months ago (actually two more versions). :-)

By: carmen

carmen — Thu, 19 Oct 2006 01:22:11 +0000

my markaby sensibilities are appalled at this ugly code. of course its not as ugly as JSON with all that weirdo escaping..

By: Jacob

Jacob — Wed, 18 Oct 2006 19:34:20 +0000

I like Jack's YUI-ext MUCH better for this stuff, performance numbers included.

By: Peter Mularien

Peter Mularien — Wed, 18 Oct 2006 16:48:37 +0000

FWIW, MochiKit has had functionality that looks very similar to this for quite a while, although IMHO the MochiKit syntax is cleaner.

By: Jesse Kuhnert

Jesse Kuhnert — Wed, 18 Oct 2006 16:32:40 +0000

Yes well, it certainly does look like “a piece” of something.. ;)

By: Mark Kahn

Mark Kahn — Wed, 18 Oct 2006 16:25:11 +0000

What is the difference between this and the more or less exact same thing posted oh 6 months ago?

My own version (demo): http://www.jslibrary.org/snips/domcreate.asp

By: Scott Schiller

Scott Schiller — Wed, 18 Oct 2006 16:15:00 +0000

There seems to be an obsession with creating HTML in Javascript these days! :) – It’s not terribly flexible, nor clean, in my opinion.

I’d suggest cloning an existing template of nodes (ie. a markup structure as in the above code example) from HTML, and then modifying it with JS.

eg.
var template = document.getElementById(‘mytemplate’).cloneNode(true);
// (modify CSS classes etc. here to adjust style, insert “specific” strings, content etc. but don’t create DOM structure..)
graft(document.getElementById(‘mycontentdiv’),template);

Trying to create any sort of relatively-complex HTML/DOM structure using javascript goes against the whole point of HTML, in my opinion. Instead, build a template in HTML and then copy/clone it and modify minimally using JS! (There’s a related discussion on the post before this comparing JS DOM/innerHTML also.)

By: Laurens van den Oever

Laurens van den Oever — Wed, 18 Oct 2006 15:58:03 +0000

From the previous article:

“The results show that innerHTML is king for all browsers:”

So what is the use of graft() over innerHTML?