Hemos visto como acceder al DOM con jQuery usando la función jQuery() o la función $().
Es entonces momento de ver como crear nuevos elementos para agregarlos al DOM y con ello lograr un sitio interactivo.
1. Creación de elementos con createElement
JS tiene un método llamado createElement que nos permite crear cualquier tipo de elemento de HTML.
En este ejemplo estamos creando un elemento de tipo párrafo usando la etiqueta p y lo guardamos en una variable llamada elem.
|
1 |
var elem = document.createElement('p'); |
Ahora, a ese elemento le podemos hacer modificaciones como asignarle un id, o cualquier otro atributo.
|
1 |
elem.id = parrafo1; |
Podemos inclusive asignarle texto o cualquier otra cosa indicando que este debe ir dentro de la etiqueta.
|
1 |
elem.innerHTML = 'Lorem ipsum'; |
2. Agregar elementos al DOM con jQuery
Por último, con jQuery agregamos nuestro elemento a cualquier sección de nuestra página.
El método a utilizar se llama append y lo que hace es inserta el objeto que se le mande como argumento al final del contenido del elemento al cual se le ejecuta el método.
En este caso, al elemento con id container le agregaremos al final nuestro párrafo.
|
1 |
$('#container').append(elem); |
Creación de elementos con createElement y jQuery
Creamos un párrafo con código de JS, le asignamos un ID, insertamos su html y lo agregamos a un div con identificador #container.
Al final, nuestro código queda de la siguiente manera:
|
1 2 3 4 |
var elem = document.createElement('p'); elem.id = parrafo1; elem.innerHTML = 'Lorem ipsum'; $('#container').append(elem); |
Haciendo el código de jQuery mas claro
JS y jQuery está desarrollado para poder anidar instrucciones, haciendo que cada función devuelva el mismo elemento. De este modo estos pasos quedarían:
|
1 |
var elem = $(document.createElement('p')).attr('id','parrafo1').html('Lorem ipsum').appendTo('#container'); |
E inclusive, pueden quedar aún mas ordenadas de la siguiente manera:
|
1 2 3 4 |
var elem = $(document.createElement('p')) .attr('id','parrafo1') .html('Lorem ipsum') .appendTo('#container'); |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
