<pedrocorreia.net ⁄>
 

<DOMTool ⁄ >




clicks: 3236 3236 2006-12-03 2006-12-03 goto programacao myNews programacao  Bookmark This Bookmark This


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.



este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:

http://muffinresearch.co.uk/archives/2006/11/28/domtool/




Subscribe News RSS  Subscribe News Updates by E-mail





myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 16082 16082 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao


Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 15912 15912 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao


Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 15587 15587 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao


HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 26670 26670 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao


Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 16144 16144 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao


Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 15985 15985 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao


Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 15306 15306 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao


Gettings to know Backbone.ks new ...

In this series, we're going to learn how to build a fully functional contacts manager using Backbone (...)

clicks: 14919 14919 2012-05-10 2012-05-10 goto url (new window) net.tutsplus.co... goto myNews programacao