Thursday, November 30th, 2006p>Stuart Colville has developed a tool for generating DOM methods from an HTML snippet called DOMTool:
The idea is that you drop a snippet of HTML in the input and the tool puts it into the document with innerHTML and then loops through that structure to generate the DOM methods needed to append that piece of HTML into a document from a script. There’s a kind of beautiful irony in using innerHTML to generate DOM methods.
I’ve added a basic compat function to handle the problem with name attributes in IE so this would need to be included in the end-user’s script should they be trying to create any elements with name attributes. This function only appears when name attributes are present in the input.
Users should also bear in mind that the ouput will not necessarily be optimal but it should be fairly easy to take the output and use it as a basis for production code.
Say you hand the tool:
You will get back:
- var p1=document.createElement('P');
- var txt1=document.createTextNode(â€™test1â€²);
- var p2=document.createElement(â€™P');
- var txt1=document.createTextNode(â€™test2â€²);
- var p3=document.createElement(â€™P');
- var txt1=document.createTextNode(â€™test3â€²);
If you want to give it a whirl, visit the tool here: DOMTool 1.01