2 min de lectura

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.

Ahora, a ese elemento le podemos hacer modificaciones como asignarle un id, o cualquier otro atributo.

Podemos inclusive asignarle texto o cualquier otra cosa indicando que este debe ir dentro de la etiqueta.

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.

 

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:

 

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:

E inclusive, pueden quedar aún mas ordenadas de la siguiente manera:

 

Compartir
Líder técnico en equipos de desarrollo de software. Profesor de Desarrollo Web en la Universidad de Guadalajara. Emprendedora. Fundadora y CTO de CORB.mx. Ponente y tallerista. Colaboradora en proyectos de software libre y Open Source. Comprometida con la comunidad y la industria de la tecnología. Enfocada en el empoderamiento de las mujeres.

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.