Generar HTML desde Javascript 1


He trabajado mucho con Javascript y sin duda alguna una de las cosas más laboriosas y repetitivas es la creación de elementos DOM. Pues bien, el otro día encontré una bonita forma de generar HTML desde Javascript. Una pena no haberla conocido antes.

Se trata de Jaml, una implementación que nos permite generar fácilmente estos elementos DOM usando una estructura muy clara y nos permite generar un código realmente limpio.

// Javascript
div(
 h1({cls: 'titulo'}"Some title"),
 p("Some exciting paragraph text"),
 br(),
 ul(
   li("First item"),
   li("Second item"),
   li("Third item")
 )
);


// HTML generado
<div>
 <h1 class="titulo">Some title</h1>
 <p>Some exciting paragraph text</p>
 <br />
 <ul>

   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
 </ul>

</div>

Además, disponemos de una serie de métodos que nos permite generar templates que podemos usar pasándole un objeto para personalizar la salida.

// Registramos la plantilla
Jaml.register('product', function(product) {
 div({cls: 'product'},
   h1(product.title),
   p(product.description),
   img({src: product.thumbUrl}),
   a({href: product.imageUrl}, 'View larger image'),
   form(
    label({'for': 'quantity'}, "Quantity"),
    input({type: 'text', name: 'quantity', id: 'quantity',
           value: 1}),
    input({type: 'submit', value: 'Add to Cart'})
   )
 );
});

// Cargamos el objeto
var bsg = {
 title      : 'Battlestar Galactica DVDs',
 thumbUrl   : 'thumbnail.png',
 imageUrl   : 'image.png',
 description: 'Best. Show. Evar.'
};

// Cargamos el template con el objeto generado
Jaml.render('product', bsg);

// Resultado

<div>
 <h1>Battlestar Galactica DVDs</h1>
 <p>Best. Show. Evar.</p>
 <img src="thumbnail.png" />
 <a href="image.png">View larger image</a>

 <form>
   <label for="quantity">Quantity</label>
   <input type="text" name="quantity" id="quantity"
          value="1"></input>
   <input type="submit" value="Add to Cart"></input>
 </form>

</div>

Leave a comment

Tu dirección de correo electrónico no será publicada.

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Un comentario en “Generar HTML desde Javascript