<pedrocorreia.net ⁄>

<DOMTool ⁄ >

clicks: 3603 3603 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:


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: 17311 17311 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: 17094 17094 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: 16979 16979 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: 28063 28063 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: 17215 17215 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: 17348 17348 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: 16688 16688 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: 16026 16026 2012-05-10 2012-05-10 goto url (new window) net.tutsplus.co... goto myNews programacao