Como añadir nuevos nodos al DOM usando Javascript

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

• identificar un nodo en el DOM
• acceder al contenido de un nodo del DOM 
• modificar las propiedades/atributos de un nodo del DOM

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

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.

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.

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.

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.