HTML2DOM
Here's this HTML-2-DOM service - http://www.html2dom.com What it does is pretty simple - you paste some HTML code and the output is JS script code that uses DOM functions to produce the same result. Could be useful when you're working on an AJAX-style app that generates new content using JavaScript.
I build this simple script, inspired by this great book I was reading - "Build Your Own AJAX Web Applications". In the book, the author sometimes starts with writing up what is the HTML code for the result you want to achieve, and then goes ahead with giving the DOM code. Because, you know, DOM code can be quite verbose and sometimes a bit hard to follow. So I thought, why not write up a simple tool to automate this HTML to DOM transition.
The code is not complicated at all, it just takes the HTML, treats it as an XML document, then loops through all the elements of the XML doc and all the attributes for each element. The script is here, hopefully reusable and you can grab it for your own projects if you wish. You can check the source of html2dom.com's index page for an example how to use the html-2-dom class.
Some limitations of the script (that I know of) are result of the fact that I'm treating the HTML as XML document. So you might get some errors if the HTML you paste is not well-formed, with all closed tags and so on. Also you cannot use and other entities, because XML doesn't know about them. What XML knows is only the pre-defined 5. And last, out of the different node types, my script understands only three - element, attribute and comment. I think it's enough for the practical purposes I was aiming at, even the comment type is a bit of a stretch.
So enjoy and as always, any feedback is welcome!
This entry was posted on Thursday, September 14th, 2006 and is filed under (x)HTML(5), Ajax, JavaScript, News/personal, tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
September 20th, 2006 at 1:34 pm
I just linked on over to html2dom from your PHP/JS MVC post. I scanned the site for license info but didn’t find any… but then came upon this post.
Thanks for the code!
Nathan
September 20th, 2006 at 2:49 pm
No problem Nathan, feel free to use the code for any purpose you feel fit. I’m not familiar with the all license options, so I don’t even bother. Everything on posted this site is public domain, I post mainly with educational/reference purpose (including my own reference and education) but if anything is usable for a real app, even better!
February 19th, 2007 at 8:27 am
Hello!
Its not that easy to parse html to js code.
Because of the damn IExplorer.
some examples:
the class Attribut
is in IE
…setAttribute(“className”,”test”);
the onclick Attribut is far stranger
div.onclick = new Function(“”,”")
but then that onclick wont be cloneable!!
the style Attribute has to be
div.style.background = … instead of div.setAttribute(“style”,”background:…);
and so on…
IE is a stranger out there!
August 17th, 2007 at 10:02 am
actually, even more stuff will fail in IE.
IE won’t build input elements properly, if they need a name attribute (which hmm, lets see… form submission does)
all the funky IE broken attributes won’t work (cellpadding, cellspacing, valign, colspan, frameborder, nowrap, accesskey, etc.)
All inline event handlers… on*=”doSomething(this);” will fail
And any checked checkbox/radio buttons will likely have issues too.
oh, and script tag contents will fail, and style tag contents….
I laugh every time I hear the IE Team Mantra “Don’t Break the Web!”
It seems they aren’t very aware that they already, completely, did.
July 15th, 2008 at 9:59 am
Thanks for the code!
February 1st, 2009 at 1:10 pm
The popular JS libraries have wrappers around creating DOM nodes. It usually resembles JSON more then anything.
They’ve taken care not to break in different browsers, so it could be something to look into if you want to support more DOM quirks in different browers.
By the way, why not just have a function that takes HTML that returns a DOM node, of the same Document origin. That way you can just append it to the Document.
eg: document.body.appendChild(HTMLtoDOM(‘hello’));
would be nice.
February 1st, 2009 at 1:11 pm
comment ate my example.
should be:
eg: document.body.appendChild(HTMLtoDOM(“<div>hello</div>”));
February 24th, 2009 at 8:02 pm
BIGGGG THXXXXX
it save my life, for real (or not), really usefull, 3 days (and night) i’m on it trying to a function like that and a working function.
I find somes with bug only.
Your script will help me to ajaxify, a web site. To change de header in this case, I can get the header on from html string, no xml.
The big deal was that IE dont allow innerHTML into …
Also with dom i will be able to wait the load of my include
thx again, if a make some mofication I will send you that.
March 24th, 2009 at 5:50 pm
This is a terrific script. Thank you very much for writing and sharing it.
Would you please include a statement into the header of the javascript code claiming copyright and assigning it into the public domain? That would be great.