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:


  1. graft(
  2.     document.getElementById("mycontentdiv"),
  3.     ["table",
  4.         {border:1,cellpadding:0,cellspacing:0},
  5.         ['tr',
  6.             ['td',
  7.                 {valign:'bottom'},
  8.                 "Graft()"
  9.             ],
  10.             ['td',
  11.                 "makes"
  12.             ],
  13.             ['td',
  14.                 "this"
  15.             ],
  16.             ['td',
  17.                 {style:'background-color:#ff0;'},
  18.                 "easier",
  19.                 ["em",
  20.                     {style:'font-size:32px;'},
  21.                     " to do.."
  22.                 ]
  23.             ]
  24.         ]
  25.     ]
  26. );

Posted by Dion Almaer at 10:32 am

2.9 rating from 36 votes


Comments feed TrackBack URI

From the previous article:

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

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

Comment by Laurens van den Oever — October 18, 2006

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.

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..)

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.)

Comment by Scott Schiller — October 18, 2006

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

My own version (demo):

Comment by Mark Kahn — October 18, 2006

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

Comment by Jesse Kuhnert — October 18, 2006

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

Comment by Peter Mularien — October 18, 2006

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

Comment by Jacob — October 18, 2006

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

Comment by carmen — October 18, 2006

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

Comment by Michael Geary — October 18, 2006

@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.

Comment by Sam Foster — October 18, 2006

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!!! “.

Comment by Roy — October 19, 2006

[…] 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. […]

Pingback by Graft method on Ajaxian » Blog Archive » Good Old Tech — October 19, 2006

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.

Comment by Hugo Wetterberg — October 19, 2006

[…] 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 […]

Pingback by JavaScript DOM - einfach mit "graft()" - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign) — October 29, 2006

Leave a comment

You must be logged in to post a comment.