Como añadir nuevos nodos al DOM usando Javascript

Como añadir nuevos nodos al DOM usando Javascript

Print Friendly, PDF & Email
Como añadir nuevos nodos al DOM usando Javascript
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.

Entradas relacionadas:

Ejercicio JS – Rellenar contenidos usando el DOM
- 49
Serie de ejercicios resueltos del tutorial Javacript. Uso básico del DOM. Incluye el repaso básico de teoria a leer y explicación.
Ejercicio – Sumas con letras
- 104
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Ejercicio JS – Salva pantallas primitivo con javascript
- 30
Ejercicio de salvapantallas primitivo creado con javascript básico y sin usar la etiqueta canvas. Incluye solución.
Instrucción “this” de Javascript explicada paso a paso
- 199
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
Ejercicio – ¿En qué día de la semana estamos?
- 67
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Sustituir un nodo por otro en el DOM mediante Javascript
- 185
Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como: Identificar nodos del DOM. Crear nuevos nodos. Si tienes claros estos conceptos sigue leyendo el ejemplo práctico.
Ejercicio – Cálculo del perímetro de un rectángulo mediante funciones
- 87
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
Función que crea un objeto y lo almacena en una lista en Javascript
- 400
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Ejercicio – ¿Estamos en fin de semana?
- 83
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Ejercicio JS – Susto emergente
- 22
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
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.