Como añadir nuevos nodos al DOM usando Javascript

Como añadir nuevos nodos al DOM usando Javascript

3.8
(5)

Para que esta entrada sea de tu provecho revisa primero las entradas sobre como:

Si los conceptos anteriores están claros ahora ya nos podemos plantear como insertar al DOM nodos creados por nosotros.

Métodos útiles para añadir nodos

Los métodos útiles para poder insertar un nodo creado por nosotros en el DOM son:

  • document.createElement(«»). Dentro de las comillas indicamos la etiqueta html que vamos a insertar.
  • elemento.setAttribute(«atributo que queremos insertar«,»contenido del atributo«)
  • elemento.innerHTML. NO lleva paréntesis.
  • elemento.appendChild(nodo) dónde elemento es el nodo al que le queremos anexionar un nodo hijo y nodo es el nodo que hemos creado anteriormente.

Existen otros métodos que podrían ser de interés como document.createTextNode(«») pero que no vamos a usar en favor del método innerHTML.

Ejemplo de como añadir un párrafo al DOM

Para añadir un nodo al DOM lo primero es saber dónde lo vamos a añadir.

Una vez tomada esta decisión entonces únicamente es necesario seguir los pasos de crear una etiqueta. Añadirle contenido y los atributos correspondientes a la etiqueta y finalmente ahijarla a un nodo ya existente.

añadir parráfo DOM mediante Javascript
Ejemplo paso a paso de como añadir una etiqueta párrafo al DoM mediante Javascript

Ejemplo de como añadir una imagen al DOM

Para añadir una imagen al DOM únicamente es necesario crear una imagen, asignarle un src y atributos o clases necesarios y finalmente ahijarla a un nodo ya existente.

añadir imagen DOM
ejemplo paso a paso para añadir una imagen al DOM

Controlar dónde añadimos un nuevo nodo

Si no lo indicamos expresamente el nuevo nodo siempre se añadirá al final. En última posición respecto de todos sus hermanos hijos de un nodo madre.

En caso de querer añadirlo en algún lugar concreto entonces podemos valernos de la instrucción

  • nodo.insertBefore(nodoCreado,nodoAntesDeQuienAñadimos)

¡Y hasta aquí la entrada de hoy! En la próxima sesión veremos como eliminar nodos del DOM.

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 3.8 / 5. Votos: 5

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment