Añade nuevos elementos complejos al DOM de forma elegante

No hace mucho que tuve la necesidad de crear complejas estructuras HTML para insertarlas en el DOM al vuelo. Aunque el método que hoy voy a mostraros no es el más recomendable, sí que puede servir en ciertos entornos. Digo que no es lo más recomendable, porque para crear estructuras deberíamos usar algún motor de plantillas como JsRender o {{ mustache }}, aunque como digo, pueden darse casos en los que no necesitemos toda la potencia de alguno de estos motores. Así pues, mi intención era crear una estructura tal que así:

<div class="box" id="trololo">  
  <h2 class="cabecera gradiente-rojo">Simple prueba</h2>
  <div class="cuerpo">
    <div class="cola">
      <ul class="lista-colas"> </ul>
    </div>
    <div class="tiempo"> </div>
  </div>
</div>  

Reproducirla con jQuery es bastante sencillo y es muy elegante.

$("<div>", {
  class: 'box',
  id: 'trololo'
}).append($('<h2>', {
  class: 'cabecera gradiente-rojo',
  text: 'Simple prueba'
}), $('<div>', {
  class: 'cuerpo'
}).append($('<div>', {
  class: 'cola'
}).append($('<ul>', {
  class: 'lista-colas',
  text: 'Aqui deberia ir un Lorem Ipsum...'
})), $('<div>', {
  class: 'tiempo'
}))).hide().appendTo('#otraDiv').fadeIn('slow');

Quizá te estés preguntando porqué usamos append y appendTo. La respuesta es, el orden. Si queremos decir que vamos a insertar un hijo en un padre, haremos algo así:

$(hijo).appendTo(padre);

Mientras que si queremos especificar que dentro de un elemento padre vamos a insertar un hijo, haremos algo así:

$(padre).append(hijo);

Además, podéis directamente asociar eventos a los elementos recién creados.

$("<div>", {
  class: 'box',
  id: 'trololo'
}).append($('<h2>', {
  class: 'cabecera gradiente-rojo',
  text: 'Simple prueba'
}), $('<div>', {
  class: 'cuerpo'
}).append($('<div>', {
  class: 'cola'
}).append($('<ul>', {
  class: 'lista-colas',
  text: 'Aqui deberia ir un Lorem Ipsum...'
}).on('click', function() {
  alert('Prueba');
})), $('<div>', {
  class: 'tiempo'
}))).hide().appendTo('#otraDiv').fadeIn('slow');

Podéis verlo en funcionamiento en jsFiddle.

Edición: Ahora puedes descubrir más sobre los sistemas de plantillas en este artículo.

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.