Crear elementos HTML con JavaScript

Pablo

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

Pablo

Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

Comentarios

  1. Juan Responder

    Muy buenas, quisiera aprender a crear este tipo de elementos, he copiado los js. y el codigo html que has puesto, pero supongo que ahora tengo que crear un boton que llame a ese js. Perdona mi ignorancia pero esque soy nuevo en esto de la programación. Y lo que quiero exactamente es que un usuario pueda crear elementos con LINK y que para un usuario inexperto sea muy facil e intuitivo cambiar la ruta a ese enlace, a parte que una vez creado no quiero que se almacene o guarde en una base de datos, sino que se guarde en caché.

Realizar un comentario