I've had this idea kicking around for a while that it would be useful to build some kind of utility that took HTML as an input and output the correct DOM methods for inserting that content into a document. To start with I thought this would be some kind of PHP regex extravaganza, but in talking to Mike Davies and kicking some ideas around about this, I realised that the best way to make this work would be to use innerHTML to insert the HTML and to then recurse down the inserted HTML to generate the DOM insert statements. There's a beautiful kind of irony in using innerHTML to indirectly generate DOM structures. Also the forgiving nature of innerHTML will mean that you can get away with missing closing tags etc.
Who is this Tool for?
It's for either programmers who want to save time not having to write out long DOM structures manually (you can read that as lazy programmers if you want!). Plus it's also potentially a useful starting point for someone who is not knowledgeable of JavaScript but would like to experiment with inserting HTML into a Document using DOM methods.
When writing this tool I had in mind making it possible to prototype code quickly by taking a snippet from an HTML mock. Obviously for production use the output of this tool would probably need optimising in most cases.
How do I use it?
To use DOMTool simply paste an HTML snippet into the input field, press "Create DOM Statements" and voila, there you have the DOM sequence to create that content.
To make it easier when you have multiple children to append to your target element, I have provided the list of top level elements you need to append in the "Nodes to append" output.
For example if my snippet looks like this:
The generated DOM sequence is:
To use this you will have to append each paragraph into your chosen target like so:
As this code is generated in such a way that you are building up the DOM structure and then appending it, I've stuck to using setAttribute as this shouldn't cause any issues. Let me know if you come across and special cases where cross-browser workarounds are required in the generated code and I'll implement them.
29-11-06: Name attribute Compatibility function. I've added a basic compat function to handle the problem with name attributes in IE so this function would need to be included in the script that makes use of the output should you be trying to create any elements with name attributes. The function is only displayed when name attributes are detected so if it's not there you don't need to worry about it.
30-11-06: Fixed style attributes to be set using properly camel-cased styles. Also I've addressed classes as although they were being set using setAttribute (According to IE's DOM inspector applying CSS rules didn't work. I have therefore changed them to be set using the className property instead.
Lastly but not least thanks to Mike Davies for being such an excellent sounding board, for contributing his ideas and for carrying out some pretty extensive testing.
Try it out
You can test DOMTool for yourself here: DOMTool V1.1. Be sure to let me know if you have any suggestions for improvements etc.
Caveats
The output varies slightly depending on which browser you use to generate the content. IE seems to gag on attributes which I should be able to fix in due course, but for now I would recommend using Firefox for generation but similarly any modern browser should do a reasonable job of it.
Also in testing Mike found that IE doesn't like generating script elements for inline code, but it's very unlikely that doing this is a good idea in any case.
This is very much a beta development (read that as buggy if you want!) so if you have ideas on optimisations or improvement please impart your wisdom in the comments below.
Changelog
- 1.1
- 5-12-06: Added warnings for bad practices + options to disable warnings and the IE compat mode. Provided fix to quotes for in-line events. Added hasAttribute wrapper for IE so DOMTool now works in IE. Will need to look at fixing/filtering certain strange attributes that are generated by Opera and IE's inner HTML.
- 1.03
- 5-12-06: Added suppport for inline events
- 1.02
- 30-11-06: Fixed style attributes and className to use properties so that they work as expected in IE.
- 1.01
- 29-11-06: Added compat function for IE6's lack of ability to handle name attributes correctly
- 1.0
- 29-11-06: Original Release