Crear y agregar
Contenido del curso
Crear y agregar
Contenido del curso
Al decir "crear nodos" nos referimos a crear elementos dentro de nuestro DOM. Para ello podemos hacer uso de: .
createElement: Para crear una etiqueta HTML:// Solo se ha creado, aún no se agrega al DOM const etiquetaH1 = document.createElement("h1")
createTextNode: Para crear un texto:// Solo se ha creado, aún no se agrega al DOM const texto = document.createTextNode("¡Hola, Mundo!")
Como solo creamos, necesitamos formas de agregarlos al DOM, para ello, JavaScript nos provee de estas formas: .
parentElement.appendChild(): Agrega un hijo al final algún elemento// Obtengo el elemento padre const parentElement = document.querySelector("selector") // Creo el nodo a insertar const h3 = document.createElement("h3") // Creo el texto del nodo const texto = document.createTextNode("Hola!") // Inserto el texto al nodo h3.appendChild(h3) // Inserto el nodo al padre parentElement.appendChild(h3)
parentElement.append(): Es la evolución de appendChild, podemos agregar más de un nodo, puedes agregar texto y... no es soportado por Internet Explorer ¬¬!
.
Un polyfill es una adaptación del código para dar soporte a navegadores que no lo soportan, aquí está el polyfill de append:
https://developer.mozilla.org/es/docs/Web/API/ParentNode/append#polyfill// Obtengo el elemento padre const parentElement = document.querySelector("selector") // Agrego al elemento padre parentElement.append("agrego un texto", document.createElement("div"))
parentElement.insertBefore(): Inserta nodos antes del elemento que le pasemos como referencia, este nodo de referencia tiene que ser un hijo DIRECTO del padre// Obtengo el elemento padre const parentElement = document.querySelector("selector") // Creo un elemento const titulo = document.createElement("h1") // Obtengo la referencia del elemento del que quiero insertar antes: const referencia = document.querySelector("selector") // ¡Lo insertamos! parentElement.insertBefore(titulo, referencia)
parentElement.insertAdjacentElement(): Inserta nodos según las opciones que le pasemos:
// Obtengo el elemento padre const parentElement = document.querySelector("selector") // Creo un elemento const nodo = document.createElement("span") parentElement.insertAdjacentElement("beforebegin", nodo)
Buenísimos tus apuntes. Muchas gracias!
Muy buen resumen
📢 Crear y agregar Nodos
Apuntes
Podemos crear nodos de dos formas
document.createElement("Elemento")
Podemos crear cualquier elemento que tenga su respectiva etiqueta
El hecho de crear un elemento no significa que se agregue al DOM, estará guardado en memoria
Crear texto
document.createTextNode("Texto")
Agregar Nodos
AppendChild
Append
InsertBefore
InsertAdjacentElement
RESUMEN: Para poder crear elementos y texto de una forma imperativa, es decir mediante el JS podemos usar createElement y createTextNode. Para agregar al DOM son otros métodos como appendChild para poner al final de un elemento, append es similar solo que nos permite agregar listas y textos (sin necesidad de usar textos), insertBefore para poner antes de alguna referencia e ### insertAdjacentElement
Me encantó tu resúmen. Me ayudó a sintetizar mejor los conocimientos de la clase. ¡Saludos!
Una forma rápida de ubicar selectores si usas chrome es la siguiente:
Eso te copiará al portapapeles algo como esto:
Aunque no lo recomiendo para usarlo dentro del código final de tu app, si es un buen atajo para hacer pruebas en el navegador.
wow está super ese truco me hubiera salvado de muchas jaja
Resumen de la clase
Crear nodos
document.createElement
Crea un elemento HTML especificado por su tagName. Este elemento es solo creado, es decir, se crea en memoria, normalmente es asignado en una variable, pero no pertenece al DOM, no forma parte de los nodos hasta que lo indiquemos. Supongamos que queremos crear un elemento div, lo hacemos de la siguiente manera
document.createElement("div");
document.createTextNode
Este método nos permite crear un nodo de texto, generalmente es usado para escapar caracteres HTML. Recibe una cadena de texto que contiene los datos a poner en el nodo. Veamos un ejemplo,
document.createTextNode("Este es un nodo de texto");
document.createAttribute
Este método nos permite crear un nodo de tipo atributo. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento. Funciona de igual forma a los demás, solo crea un nodo, que puede o no en el DOM, veamos un ejemplo,
document.createAttribute("href");
Agregar Nodos
parentElement.appendChild
Este método nos permite agregar un elemento (Nodo) al final de la lista de hijos de un elemento padre previamente especificado, es decir, agrega un elemento dentro de un padre, y este es colocado al final. Es importante resaltar que si el Nodo que se esta insertando existe en el documento actual, es una referencia, este sera removido del padre actual y sera puesto dentro del padre que se esta especificando. por otro lado este método retorna o devuelve el elemento Nodo insertado. Supongamos que tenemos una lista, y queremos insertar un nuevo elemento con el texto "Item 3", lo haremos de la siguiente manera
const list = document.querySelector("#list"); const item = document.createElement("li"); const text = document.createTextNode("Item 1"); // Insertamos el texto dentro del item item.appendChild(text); // Insertando el item en la lista container.appendChild(item);
parentElement.append
Este método es una evolución de appendChild, donde podemos agregar más de un nodo, cosa que no podemos hacer en el método anterior, podemos agregar texto. Este también agrega los nodos al final de los hijos del elemento padre especificado, y no retorna ningún elemento. No tiene soporte adecuado para IE 11. Veamos un ejemplo, donde insertaremos un texto en un elemento li, y ademas agregaremos un nuevo hijo, simulando un menú de varios niveles.
const container = document.querySelector("ul.container"); const item = document.createElement("li"); const subItem = document.createElement("ul"); // Agregamos el texto de item, adicional insertamos la nueva lista item.append("Categorias", subItem); // Agremos el item al menu container.append(item);
parentElement.insertBefore
Este método permite insertar o agregar un nodo, antes del nodo que pasemos de referencia, y que pertenece al padre del que estamos accediendo a dicho método. Si insertamos un Nodo que ya esta en nuestro DOM el método lo cambia de lugar, es decir, lo quita de donde se encuentra actualmente y lo inserta en el sitio al que estamos haciendo referencia. Este método recibe dos argumentos, el primero de ellos es el Nodo que queremos insertar, y el segundo es el Nodo de referencia. Si el segundo argumento es null entonces el nodo se insertar al final de la lista de hijos del padre, es decir, actúa como el appendChild. Veamos un ejemplo,
const parent = document.querySelector(".container"); const item = document.querySelector(".contact"); const newItem = document.createElement("li"); const text = document.createTextNode("Blog"); newItem.append(text); /* Insertamos el nuevo elemento al padre, lo insertaremos antes del elemento con clase contact */ parent.insertBefore(newItem, item);
parentElement.insertAdjacentElement
Este método permite insertar un nodo de acuerdo a una posición especificada, y lo ubica con respecto al elemento sobre el cual es llamado. Es uno de los más complicados de usar, pero el que más opciones de inserción nos proporciona. Este método recibe 2 argumentos, el primero de ellos donde se insertará el nuevo nodo, para esto contamos con cuatro opciones, las cuales son:
Gran resumen!! 👍
Excelente resumen, gracias!!
Un truco que aprendí en el Curso de Debugging con Chrome DevTools: Chrome te ayuda a tener el querySelector de cualquier elemento, sólo tienes que dar click derecho > Copy > Copy JS path
Como resultado te generará un código como este
document.querySelector("body > div > main > div.py-5.text-center > h2")
Genial tu aporte
Hola si estás viendo esto IE11 ya esta muerto :D VIVAAAAA!!!
InsertBefore y el insertAdjacentElement( 'beforebegin',ref ) tienen el mismo funcionamiento?
Es correcto, dan el mismo resultado al final :)
COLOR NEGRO ES MI REFERENCIA
referencia.insertAdjacentElement("beforebegin",nodo)
referencia.insertAdjacentElement("afterend",nodo)
referencia.insertAdjacentElement("beforeend",nodo)
referencia.insertAdjacentElement("afterbegin",nodo)
Me pareció que este aporte se merece unos 👏👍🙏🎊🎉🪄
Crear y Agregar Nodos:
Recordemos que esto es crear y asignar a variables no esta en el DOM
const element = document.createElement("Cualquier tipo de etiqueta html"); const text = document.createTextNode("Texto que queramos crear");
Para poder agregar nodos tendremos varias formas de hacerlo
const element = document.createElement("Cualquier tipo de etiqueta html"); element.innerText = "Agregamos este texto"; // innerText te permite agregar texto a elementos del DOM const element2 = document.createElement("Cualquier tipo de etiqueta html"); element2.innerText = "Agregamos este texto otro texto"; const parentElement = document.getElementById("padre"); /* appendChild: Agrega el elemento al final de la lista de nodos del padre. Parametro(Nodo) */ parentElement.appendChild(element); /* append: Se le pasa un Nodo por parámetro y agrega el elemento al final de la lista de nodos del padre. - Puedes agregar mas de un nodo. - Puedes agregar texto - No lo soporta IE:11 pero en serio internet explorer hasta cuando T.T Parámetros(textos, Nodos, ...) Toma en cuenta que append no te permitirá agregar repetida veces el mismo nodo, intenta agregando el element2 y luego volver a intentar con el element para que veas que lo que pasara es que lo cambiara de lugar. Por que lo que hará es retira el nodo y re asignarlo en la ultima posición. */ parentElement.append(element2); /* insertBefore: Este permite agregar como su nombre lo indica es un nodo antes de!! Parametros: (nodo-que-agregaremos, referencia-de-elemento) Tomar encuentra que la referencia debe ser hijo directo del nodo base para ejemplo a seguir el element debe ser hijo directo del parentElement para poder agregar el element2 antes del element */ parentElement.insertBefore(element2, element); /* insertAdjacentElement: Este permite agregar nodos antes de comenzar la etiqueta, justo después de comenzar la etiqueta, antes de finalizar la etiqueta y luego de finalizar la etiqueta Parametros: (ubicación: ("beforebegin", "afterbegin", "beforeend", "afterend"), nuevo_nodo) */ parentElement.insertAdjacentElement("beforebegin", element); parentElement.insertAdjacentElement("afterbegin", element); parentElement.insertAdjacentElement("beforeend", element); parentElement.insertAdjacentElement("afterend", element);
Hoy en día existen varias formas de agregar elementos al DOM una de las que me gusta usar a mi es usando los literals strings.
// Agregando elementos con Literals Strings. /*Prueba de esta forma*/ const parentElement = document.getElementById("element"); const elementString = `<div>Soy un div</div>`; /*Esta primera forma asignamos al parentElement que su contenido HTML será igual a elementString*/ parentElement.innerHTML = elementString /*En esta segunda forma asignamos al parentElement que su contenido HTML será igual al contenido HTML que este ya tiene mas el contenido que le agregamos con elementString imaginate esto como una concatenación de strings */ parentElement.innerHTML += elementString
Espero te guste mi resumen!!
necesitaba este curso :)
El document.createTextContent que el mencionó al inicio hace lo mismo que document.createTextNode ??
Hola @giselleB, buen ojo!
El correcto es document.createTextNode
textContent existe pero se usa principalmente para leer el texto que tiene un nodo.
e.j.:
const texto = document.querySelector(h1).textContent
Saludo
Mil gracias por la aclaratoria @jonalvarezz
/* Crear Nodos Poremos pasarle como argumento el elmento o texto que queremos crear y web API nos devolvera el elemento creado Con que creemos un elemento no significa que este necesariamente se agregue al DOM */ document.createElement // Crear etiqueta HTML const etiquetaH1 = document.createElement("h1"); document.createTextNode // Para crear un texto const texto = document.createTextNode("Hola Mundo"); // Agregar Los Nodos Javascript nos provee estas formas: parentElement.appendChild() parentElement.append() parentElement.insertBefore() parentElement.insertAdjacentElement() //Ejemplo con .appendChild Agrega un elemento hijo al final de este //primero leemos el elemento que queremos utilizar const container = document.querySelector('div py5 text-center'); //creamos el nodo que vamos a insertar const h3 = document.createElement('h3') // luego le decimos al elemento padre que vamos a agregar un elemento container.appendChild(h3) // agregaremos texto a nuestro elemento h3 const texto = document.createTextNode('holita'); h3.appendChild(texto) /* node.append Es la evolucion de appendChild -> Puedes agregar más de un nodo, podemos pasar muchos nodos y los agregara al final. -> Puedes agregar texto -> No es soporta por internet explorer */ container.append('hola 2', document.createElement('div')) /* parentElement.insertBefore(): Inserta nodos antes del elemento que le pasemos como referencia, este nodo de referencia tiene que ser un hijo DIRECTO del padre La clave para todos los metodos que empiezan con insert es tener en cuenta la referencia, en insertBefore la referencia va despues de el nodo que queremos agregar. El nodo de referencia tiene que ser hijo directo del nodo base */ // Obtengo el elemento padre const parentElement = document.querySelector("selector") // Creo un elemento const titulo = document.createElement("h1") // Obtengo la referencia del elemento del que quiero insertar antes: const referencia = document.querySelector("h2") // ¡Lo insertamos! parentElement.insertBefore(titulo, referencia) /* parentElement.insertAdjacentElement() Inserta un nodo segun las opciones que le pasemos al metodo beforebegin -> Lo inserta antes del nodo afterbegin -> Lo inserta despues del nodo beforeend -> Lo inserta antes de donde finaliza el nodo afterend -> Lo inserta después de donde finaliza el nodo */ //obtengo la referencia const referencia = document.querySelector('h2') // creo el elemento const nodo = document.createElement('span') /*insertamos el nodo utilizando nuestro metodo el cual recibe por parametro la opcion de donde lo queremos colocar y luego le indicamos el elemento que vamos a insertar */ container.insertAdjacentElement('beforebegin', nodo);```
La MDN nos da esta guía para que podamos ir practicando:
<!-- beforeBegin --> <p> <!-- afterBegin --> foo <!-- beforeEnd --> </p> <!-- afterEnd -->
Nota: Las posiciones beforeBegin y afterEnd sólo funcionan si el nodo está en un árbol y tiene un padre.
Los nodos en el dom son los elementos que creamos dentro de otro elemento, <div> <h2>Nodo</> </div>, en este ejemplo el h1 seria un nodo, su padre seria el div, pero si tomamos toda la estructura de html el nodo principal de una pagina web es la etiqueta <html>. de aqui todo elemento que este dentro de ella es un nodo padre (porque puede tener elementos dentro de el) y un “nodo hijo”.
Al trabajar con JS en la manipulación del DOM, nos encontraremos que tenemos que crear un elemento o un texto en cierta ocación. Aqui entran los metodos, document.createElement y document.createTextNode.
Estos metodos no nos agrega el elemento al documento, solo crea un espacio de memoria para luego poderlos agregar a un nodo “elemento” existente en nuestro dom. Ejemplo: .
// En nuestro DOM tenemos un div que tiene un id = container, dentro de el vamos a agregar un parrafo que diga Hello Platzi // Primero buscamos y alojamos en memoria ese div const parent = document.querySelector('#container'); console.log(parent); //Output: <div id="container"></div> // Creamos nuestro parrafo y nuestro texto const p = document.createElement('p); const text = document.createTextNode('Hello Platzi'); //Agregamos el texto al parrado con el metodo append p.appendChild(text); // Output: <p>Hello Platzi</p> // Y ahora agregamos ese parrafo a nuestro div parent.appendChild(p); /* Output: <div id="container"> <p>Hello Platzi</p> </div> */
“ Recordar que el appendChild siempre nos agrega el elemento al final “
Metodos para agregar Elementos => .
El metodo appendChild() nos agrega un elemento al final del nodo padre. .
El metodo append() es nuevo, es una "evolución" de appendChild ya que nos permite agregar mas de 1 elemento, pero no es soportado por Internet explorer 🤔
insertBefore() nos agrega un nodo despues de una referencia, este metodo recibe 2 parametros:
insertAdjacentElement() es un poco mas complejo, primero debemos de tener nuestra referencia creada ya que con ella vamos a acceder a este metodo, luego este metodo recibe 2 parametros:
Este es el comportamiento del insertAdjacentElment, la referencia es un h4 de color azul.
Elemento base
Usando before begin
Usando after begin - es similar a un insert before.
Usando before end - es similar a un append child
Por último usando after end
Y por qué no se usa innerHTML o innerText?
Esta es la respuesta que me dio chatGPT . La principal ventaja de utilizar métodos como appendChild en lugar de innerHTML es la mejor rendimiento. Cuando se usa innerHTML, el navegador debe analizar todo el HTML como una cadena, lo que puede ser costoso en términos de rendimiento si se está trabajando con un gran conjunto de datos. Además, al utilizar appendChild, puedes agregar elementos uno por uno, lo que te permite tener un mayor control sobre el orden y la estructura de tus elementos. . Otra ventaja es la seguridad, al usar innerHTML estás expuesto a ataques de inyección de código, ya que estas ingresando un string con codigo html, mientras que con appendchild estas agregando elementos de forma segura y no estas expuesto a inyecciones. . En resumen, si estás trabajando con un gran conjunto de datos o necesitas tener un gran control sobre la estructura de tus elementos, es recomendable usar métodos como appendChild en lugar de innerHTML.
¿En pleno 2022 ya no nos preocuparemos por IE no?
Hey ! No , de hecho IE ya esta practicamente "muerto", Microsoft tambien ha anunciado que en poco tiempo retirara este navegador , y librerias como React en su ultima version (18) ha dejado de ser compatible con este navegador
Que pasaria si creo el nodo pero nunca lo agregon al DOM principal???
No va a pasar nada con tu web, se quedara en la memoria de JavaScript, hasta que sea utilizado. 🙋🏻♂️
Nada, tu nodo moriría cuando JavaScript se termine de ejecutar :D