DOMTool: Crea código DOM a partir de HTML

0 COMENTARIOS - Publicado hace 30 meses - Clasificado en: DOM, AJAX, TUTORIALES

DOOMTool es una interesante herramienta para aquellos que se estén iniciando en AJAX y el proceloso mundo de la arquitectura DOM. La herramienta sirve para convertir el código HTML a DOM. Las aplicaciones son múltiples. Desde insertar texto de un modo similar al método innerHTML a crear nuevos bloques elementos dentro de una web. De este modo podremos ahorrarnos bastante tiempo escribiendo manualmente largas estructuras DOM.

Vamos a realizar un ejemplo bastante sencillo para ver su uso. Supongamos que deseamos que cuando se pulse un botón deseamos que aparezca un nuevo bloque con una imagen y un texto. El código de lo que deseamos crear sería algo como:

<div style="width:300px;height:100px;font-size:11px;background-color:#CCC;">
<img src="http://www.webintenta.com/wp-content/uploads/2007/08/franjas1.jpg" style="float:left;margin-right:15px;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

(Perdón por la utilización de estilos en línea pero es que el ejemplo queda un poco más visual y no se complica en demasía)

A continuación accedemos a la herramienta y pegamos este código en el textarea dedicado al código HTML. Pulsamos el botón "Create DOM Statements". Con ello obtendremos como salida el código DOM necesario:

var div1=document.createElement('div');
div1.style.width="300px";
div1.style.height="100px";
div1.style.fontSize="11px";
div1.style.backgroundColor="rgb(204, 204, 204)";
var img1=document.createElement('img');
img1.style.cssFloat="left";
img1.style.marginRight="15px";
img1.setAttribute('src','franjas1.jpg');
div1.appendChild(img1);
var txt2=document.createTextNode('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n');
div1.appendChild(txt2);

Así como los nodos que deberemos anexar. En este caso únicamente div1.

Ahora únicamente nos quedaría crear una función, que al ser ejecutado, anexase el contenido creado mediante DOM donde deseemos. En mi caso he creado una función llamada pruebaDOM y anexo el contenido dentro de un div denominado ContDOM. El ejemplo completo quedaría:

<html>
<head>
<title>PRUEBA DOMTOOL</title>
<script language="javascript">
function pruebaDOM(){
   //CODIGO GENERADO POR DOMTOOL
   var div1=document.createElement('div');
   div1.style.width="300px";
   div1.style.height="100px";
   div1.style.fontSize="11px";
   div1.style.backgroundColor="rgb(204, 204, 204)";
   var img1=document.createElement('img');
   img1.style.cssFloat="left";
   img1.style.marginRight="15px";
   img1.setAttribute('src','franjas1.jpg');
   div1.appendChild(img1);
   var txt2=document.createTextNode('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n');
   div1.appendChild(txt2);
   //ANEXAMOS EL CONTENIDO
   var t = document.getElementById('ContDOM');
   t.appendChild(div1);
}
</script>
<div id="ContDOM">
<a href="javascript:pruebaDOM();">Ejecutar DOM</a>
</div>
</body>
</html>