Como añadir nuevos nodos al DOM usando Javascript

Como añadir nuevos nodos al DOM usando Javascript

Print Friendly, PDF & Email
Valora esta entrada

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.

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.