Creacion de Nodos basica en javaScript

6649

En este mini tutorial vas a aprender a crear y agregar nodos en javaScript Tenemos varias maneras de crear elementos para el DOM esta es una forma de muchas .
Partimos de un documento HTML como por ejemplo:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="./Script.js"></script></head><body><h1>Crea y agrega Nodos</h1><mainclass="padre"><pclass="parrafos">Parrafo1</p><pclass="parrafos">Parrafo2</p><pclass="parrafos">Parrafo3</p></main></body></html>

Para agregar un nuevo parrafo desde javaScript consta de dos pasos
1.Creamos el Nodo
2.Agregamos el nodo

antes de comenzar seleccionamos el elemento padre en este caso el main que contiene los parrafos

const elementoPadre = document.querySelector(`.padre`);

Ahora vamos con el primer paso:

const parrafoNuevo = document.createElement(`p`);

Creamos el elemoento <p> pero no ha sido agregado al html, para agregar este nodo a nuesto documento vamos a utilizar el metodo appendChild y ahora comenzamos con el segundo paso:

elementoPadre.appendChild(parrafoNuevo)

a.Ponemos el elemento seleccionando el padre
b. despuez el metodo appendChild
c. entre parentesis el nodo.
En este punto se a agregado al main contenedor pero no se ha colocado ningun texto.

HTML (inspeccionar )

<mainclass="padre"><pclass="parrafos">Parrafo1</p><pclass="parrafos">Parrafo2</p><pclass="parrafos">Parrafo3</p><p></p></main>

//Seleccionar elemento padreconst elementoPadre = document.querySelector(`.padre`);
//CREAR NODO const parrafoNuevo = document.createElement(`p`); 
//AGREGAMOS NODO
elementoPadre.appendChild(parrafoNuevo);

Para agregar un texto tenemos 2 formas
La primera creando un nodo de tipo texto y luego agregando este nodo al padre que seria parrafoNuevo
La segunda opcion es utilizando el peligroso y cuidadoso metodo de innerHTML el cual los usuarios pueden dañar y manipular nuestro trabajo por ejemplo al escribir algo de codigo en una consola un usuario escribiera algo como por ejemplo: <img src=xonerror=alert("XSS Attack!")> .

1.Para Crear un nodo tipo texto en javaScript se conose con el metodo document.createTextNode(lo que quieras escribir) en este ejemplo se haria de la siguiente forma creamos el nodo:

const textoNuevo= document.createTextNode(`Hola, World`);

ahora con este nodo creado se agrega al padre:

`parrafoNuevo.appendChild(textoNuevo);

//Seleccionar elemento padreconst elementoPadre = document.querySelector(`.padre`);
//CREAR NODO const parrafoNuevo = document.createElement(`p`); //Se crea el nodo de texto dentro de la etiqueta <P>const textoNuevo= document.createTextNode(`Hola, World`);// Escribe lo que queiras en parentesis//AGREGAMOS NODO
elementoPadre.appendChild(parrafoNuevo);
parrafoNuevo.appendChild(textoNuevo); //Con el metodo de agregar dentro de la etiqueta <p>

y listo se ha colocado un nuevo parrafo
Sin título.png

2.Una de las formas de escribir HTML desde javaScript es utilizando innertHTML, innerText y document.CreateTextNode
el cual recalco que es muy peligroso si no sabes utilizarlo.

HTML

<body><h1>Crea y agrega Nodos</h1><mainclass="padre"><pclass="parrafos">Parrafo1</p><pclass="parrafos">Parrafo2</p><pclass="parrafos">Parrafo3</p></main><scriptsrc="./Script1.js"></script></body>

//Seleccionar elemento padreconst elementoPadre = document.querySelector(`.padre`);


//CREAR NODO const parrafoNuevo = document.createElement(`p`); 
const textoNuevo= document.createTextNode(`Hola, World`);
//OTRO PARRAFO NUEVOconst otroParrafo = document.createElement(`p`);//Creamos la variable para insertarle el metodo 
otroParrafo.innerHTML=(`<b>otro parrafo con negrita</b>`);//este metodo convierte todo a HTML //AGREGAMOS NODO
elementoPadre.appendChild(parrafoNuevo);
parrafoNuevo.appendChild(textoNuevo); 
elementoPadre.appendChild(otroParrafo);//Lo agregamos dentro del elemento padre.

Nota diferencias importantes:

createTextNode('solo muestra texto`)

innerHTML=convierte todo a html como en el ejemplo de otro parrafo con negrita

appendChild → Este metodo nos deja insetar un nodo a la vez

append→ Es la evolucion de appendChild y nos permite agregar varios nodos a la vez separados por una coma, ya sean elementos o texto.
Ejemplo:
JS

//Seleccionar elemento padreconst elementoPadre = document.querySelector(`.padre`);


//CREAR NODO const parrafoNuevo = document.createElement(`p`); 
const textoNuevo= document.createTextNode(`Hola, World`);
//OTRO PARRAFO NUEVOconst otroParrafo = document.createElement(`p`);
otroParrafo.innerHTML=(`<b>otro parrafo con negrita</b>`);


//AGREGAMOS NODO
parrafoNuevo.appendChild(textoNuevo); 
elementoPadre.append(otroParrafo, parrafoNuevo);//En vez de appendChild