Wednesday, October 18th, 2006
Graft: Making Javascript DOM a Piece of Cake
Category: JavaScript
, Library
schadenfreude has been frustrated by DOM, and and decided to make Javascript DOM a Piece of Cake with the graft() Function,
This comes from Sean Burke and his Higher Order JavaScript book.
Graft enables code such as this:
JAVASCRIPT:
-
-
graft(
-
document.getElementById("mycontentdiv"),
-
["table",
-
{border:1,cellpadding:0,cellspacing:0},
-
['tr',
-
['td',
-
{valign:'bottom'},
-
"Graft()"
-
],
-
['td',
-
"makes"
-
],
-
['td',
-
"this"
-
],
-
['td',
-
{style:'background-color:#ff0;'},
-
"easier",
-
["em",
-
{style:'font-size:32px;'},
-
" to do.."
-
]
-
]
-
]
-
]
-
);
-
2.8 rating from 31 votes
From the previous article:
“The results show that innerHTML is king for all browsers:”
So what is the use of graft() over innerHTML?
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.)
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
Yes well, it certainly does look like “a piece” of something.. ;)
FWIW, MochiKit has had functionality that looks very similar to this for quite a while, although IMHO the MochiKit syntax is cleaner.
I like Jack’s YUI-ext MUCH better for this stuff, performance numbers included.
my markaby sensibilities are appalled at this ugly code. of course its not as ugly as JSON with all that weirdo escaping..
And here’s yet another version of the same thing, also from a few months ago (actually two more versions). :-)
@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.
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!!! “.
[...] 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. [...]
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.
[...] 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 [...]