HTML2DOM

September 14th, 2006. Tagged: (x)HTML(5), Ajax, JavaScript, News/personal, tools

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!

Tell your friends about this post: Facebook, Twitter, Google+

9 Responses

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

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

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

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

  5. Thanks for the code!

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

  7. comment ate my example.

    should be:

    eg: document.body.appendChild(HTMLtoDOM(“<div>hello</div>”));

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

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

Leave a Reply