Crear elementos HTML con JavaScript

Utilizar jQuery en cierta forma facilitó mucho mi trabajo como programador, sin embargo entiendo que muchas veces una solución nativa puede ser más apropiada de cara a no recargar un proyecto con código innecesario.

Por ejemplo, si para lo único que necesitamos jQuery es para crear elementos HTML podemos optar por el.js, una biblioteca nativa JavaScript que sirve justamente para eso, y que ademas es mucho más liviana que jQuery.

crear elementos HTML sin utilizar jquery

el.js es una solución perfecta para construir elementos HTML de forma sencilla y ágil, ya que con apenas una simple función y parámetros podemos crear prácticamente cualquier elemento HTML convencional, ya sea una DIV pura y dura, o bien con identificador y clase.

Ejemplo de uso:

Crear un DIV:

el.create('div')
=> <div></div>

Crear un elemento con contenido y una clase:

el.create('a', {'class':'content', 'href':'http://kabytes.com', 
'content':'Kabytes'})
=> <a href="http://kabytes.com">Kabytes</a>

Un ejemplo más complejo utilizando selectores:

el.create('div#myId.content')
=> <div id="myId"></div>

el.create('div.row')
=> <div class="row"></div>

el.create('div.row', {'id':'myId', 'content':'Some content in your div'})
=> <div id="myId" class="row">Some content in your div</div>

Un dato importante, el.js en su versión simplificada tiene un peso de apenas 1.141kb, un valor casi insignificante, que se reducirá más al ser comprimido mediante gzip. Es justamente este dato que brinda valor a esta solución si comparamos el peso con otras bibliotecas o frameworks de terceros.

Web: el.js

Categorizado en: