No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Crear y agregar

6/28
Recursos

Aportes 87

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Al decir 鈥渃rear 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:
    1. beforebegin: Lo inserta antes del nodo
    2. afterbegin: Lo inserta despues del nodo
    3. beforeend: Lo inserta antes de donde finaliza el nodo
    4. afterend: Lo inserta despu茅s de donde finaliza el nodo
// Obtengo el elemento padre
const parentElement = document.querySelector("selector")
// Creo un elemento
const nodo = document.createElement("span")
parentElement.insertAdjacentElement("beforebegin", nodo)

馃摙 Crear y agregar Nodos

<h4>Apuntes</h4>
  • Podemos crear nodos de dos formas

    • Crear elementos
    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")
      
      • Solo sera un simple texto creado para agregarlo en alg煤n momento a un elemento
<h3>Agregar Nodos</h3> <h4>AppendChild</h4>
  • Nos agrega un nodo al final del elemento en que apliquemos la operaci贸n
  • Es un m茅todo que existe desde hace mucho tiempo, tiene algunas limitaciones
<h4>Append</h4>
  • Es la evoluci贸n de appendChild
  • Puedes agregar m谩s de un nodo
  • Puedes agregar texto sin necesidad de usar createTextNode
  • IE 11: No soportado
<h4>InsertBefore</h4>
  • Nos permite poner un nodo antes de alguna referencia que tengamos
  • Este m茅todo recibe dos par谩metros
    • Nuevo Nodo
    • Referencia 鈬 Hijo directo del nodo base
<h4>InsertAdjacentElement</h4>
  • Es un m茅todo complejo pero el cual cuenta con una basta flexibilidad
  • Nos permite especificar donde poner el nuevo nodo con una lista de posiciones predefinidas

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

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.

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 鈥淚tem 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:

    • beforebegin: Inserta el elemento antes de la referencia. Es decir, antes del nodo que llama al m茅todo en cuesti贸n.
    • afterbegin: Insertar el nodo dentro del elemento referencia, pero ademas de esto lo inserta antes de su primer hijo.
    • beforeend: Al igual que la opci贸n anterior lo agrega dentro del elemento referencia, con la particularidad de que ahora lo inserta despu茅s de su ultimo hijo.
    • afterend: Inserta el elemento despu茅s del nodo referencia, es decir, despues del nodo que llama al m茅todo.

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")

Hola si est谩s viendo esto IE11 ya esta muerto 馃槃 VIVAAAAA!!!

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
<h3>Espero te guste mi resumen!!</h3>

COLOR NEGRO ES MI REFERENCIA

referencia.insertAdjacentElement("beforebegin",nodo)
referencia.insertAdjacentElement("afterend",nodo)
referencia.insertAdjacentElement("beforeend",nodo)
referencia.insertAdjacentElement("afterbegin",nodo)

necesitaba este curso 馃槂

/*  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:

  • 鈥榖eforeBegin鈥: Antes del elementoObjetivo.
  • 鈥榓fterBegin鈥: Dentro del elementoObjetivo, antes de su primer hijo.
  • 鈥榖eforeEnd鈥: Dentro del elementoObjetivo, despu茅s de su 煤ltimo hijo.
  • 鈥榓fterEnd鈥: Despu茅s del elementoObjetivo.
<!-- 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> <h1>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 鈥渘odo 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 鈥渆lemento鈥 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 鈥渆voluci贸n鈥 de appendChild ya que nos permite agregar mas de 1 elemento, pero no es soportado por Internet explorer 馃

    • Para poder usarlo en Internet Explorer tenemos que usar appendChild, o un polyfill, en pocas palabras lo que hace es afaptar el codigo para dar soporte a otros navegadores.
  • insertBefore() nos agrega un nodo despues de una referencia, este metodo recibe 2 parametros:

    1. Es el elemento que queremos pasar.
    2. Es la referencia, es decir, es un elemento que ya esta en el nodo (tiene que ser un hijo directo), pero va a ser el que quede antes del que vamos a insertar.
  • 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:

    1. Es una lista de opciones las cuales es como queremos insertar nuestro nodo, estas son:
      • beforebegin => nos agrega el elemento que queremos antes de la referencia
      • afterbegin => lo agrega despues de la referencia
      • beforeend => lo agrega dentro de la referencia pero al final
      • afterend => lo agrega dentro de la referencia pero al inicio

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

Brutal el insertAdjacentElement nunca m谩s usar茅 el append que tanto amaba鈥 Un sentimiento similar a cuando descubr铆 que se pod铆a usar un objeto clave valor en vez de un switch o un if else.
Dejo el link por si les da curiosidad:
EVITA usar SWITCH en tu JAVASCRIPT - (Buenas Pr谩cticas)

La verdad me hubiera gustado ver esto mucho antes, en la ruta batall茅 b谩stente al comienzo, porq todos los cursos pr谩cticamente manipulan el DOM, por lo que tuve que aprender mucho por otros lados. Y pues este curso est谩 al final pr谩cticamente, deber铆a estar much铆simo antes.

Polyfill: Un polyfill es un fragmento de c贸digo (generalmente JavaScript en la Web) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa.

Por ejemplo, se podr铆a usar un polyfill para imitar la funcionalidad de un elemento HTML Canvas en Microsoft Internet Explorer 7 usando un complemento de Silverlight, o un soporte m铆mico para las unidades rem CSS, o text-shadow, o lo que tu quieras. - mdn web docs

Crear y agregar nodos

Al decir crear nodos nos referimos a crear elementos dentro de nuestro DOM. Para ello podemos hacer uso de:

createElement: Crea una etiqueta HTML

const h1 = document.createElement("h1"); // Creamos la etiqueta
const text = document.createTextNode('Hello World'); // Agregamos texto a nuestro t铆tulo
h1.appendChild(text); // Agregamos el t铆tulo a nuestro documento
document.body.appendChild(h1); 

// Nota: Tambi茅n se pueden agregar nodos a cualquier otro elemento

parentElement.insertBefore(): Inserta nodos antes del elemento que le pasemos como referencia, este nodo de referencia聽tiene que ser un hijo DIRECTO del padre.

const parentElement = document.querySelector("main"); // Obtengo el elemento padre
const titulo = document.createElement("h1"); // Creo un elemento
const referencia = document.querySelector("selector"); // Referencia del elemento del que quiero insertar antes
parentElement.insertBefore(titulo, referencia); // Insertar el elemento

parentElement.insertAdjacentElement(): Inserta nodos seg煤n las opciones que le pasemos:

  • 'beforebegin': Antes del聽elementoObjetivo.
  • 'afterbegin': Dentro del聽elementoObjetivo, antes de su primer hijo.
  • 'beforeend': Dentro del聽elementoObjetivo, despu茅s de su 煤ltimo hijo.
  • 'afterend': Despu茅s del聽elementoObjetivo.
const parentElement = document.querySelector("main"); // Obtengo el elemento padre
const node = document.createElement("span"); // Creo un elemento
parentElement.insertAdjacentElement("beforebegin", nodo); // Insertamos el nodo
<h4>Crear y agregar</h4>
document.createElement(elem); //pasamos una etiqueta entre comillas
/*Creamos un elemento en memoria pero NO se agrega al DOM*/

document.createTextNode(data); //Esto simplemente es texto

Hay muchas formas de agregas nodos al DOM, depende de las necesidades, algunos m茅todos son:

node.appendChild(element);
parentNode.append(Nodes/DOMStrings); //append es la evoluci贸n de append child, puedes agregar m谩s de 1 nodo, puedes agregar texto
node.insertBefore(newNode, referenceNode); // El nodo de referencia tiene que ser hijo directo del nodo base
element.insertAdjacentElement(posicion,element); // posisci贸n puede ser: 'beforebegin'|'afterbegin'|'beforeend'|'afterend'

Esta clase estuvo genial, incre铆ble todo lo que aprend铆.

La informaci贸n gr谩fica ayuda bastante a entender el insertAdjacentElement

![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-13%20a%20las%2020.45.30-47d963b0-2e02-4f78-a17c-0f669c1c1110.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-13%20a%20las%2020.45.20-c0a8dab8-3a4f-4344-aff6-ed68a88303e6.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-13%20a%20las%2020.44.33-dbf2afb0-ae97-4290-93c2-722c90f6a305.jpg)

Wow, me qued贸 claro lo de la posici贸n de insertAdjacentElement 馃槃

ref.insertAdjacentElement posiciones al insertar elementos grafico

ref.insertAdjacentElement

node.insertBefore

node.append

document.appendChild

fornas de agregar nodos

document.createTextNode

document.create.element

crear nodos

node.append 'no funciona en internet explorer soporte'

node.insertBefore

agregar nodos

M茅todo: .insertAdjacentElement()

  • Antes del elemento.
  • Despu茅s de empezar el nodo.
  • Antes de que termine el nodo.
  • Despu茅s de que termine el elemento.
referencia.insertAdjacentElement('beforebegin, afterbegin, beforeend, afterend', nodo)

Les dejo un tip: otra forma de agregar un texto a una etiqueta es usando:

 variable.textContent = "texto";

Como se usa?

const h2 = document.createElement('h2');
h2.textContent = 'Welcome!';

Es mas facil de usar para mi.

Para crear un Nodo se utuiliza el comando document.createElemento(鈥渉1鈥),pero este hecho no significa que se haya creado, ahora hay que agregarlos al documento html, y para eso hay muchas formas

  • parentElement.appendChild();
  • parentElement.append();
  • parentElement.insertBefore();
  • parentElement.insertAdjacentElement();

El link de la descripci贸n no existe cuando uno entra ya no esta la informaci贸n disponible

insertBefore()

aprendi mucho en este video. que buenos metodos

No importa lo internet explorer porque ya lo dieron de baja 馃槶

Menos mal llegue a buena hora, cuando ya Internet Explorer esta deprecado jasjd

La verdad el mejor profesor de platzi junto con freddy

<code> 
<h1> As铆 vamos!!<h1/>

N贸tese que al agregar un mismo elemento varias veces, solo se mueve el elemento, como paso con insertAdjacentElement

Comparto mis apuntes en MarkDown

6. Crear y Agregar

Crear elementos

Cuando creamos elementos, estos no se agregan al DOM, sino que quedan en memoria listos para ser agregados al DOM.

Para crear elementos podemos usar dos m茅todos: createElement() y createTextNode().

//Crando elementos
document.createElement('tag name'); //crea nodos HTML

//creando texto
document.createTextNode('Any text'); //crea nodos de texto

Agregar nodos

Existen diversas maneras de agregar nodos al DOM, entre los principales m茅todos tenemos

parentElement.appendChild()

Siempre agrega un nodo al final dentro del elemento padre.

<div class='node'>
    <h1> Welcome!</h1>
</div>

Vamos a agregar un h2 y su contenido al HTML mostrado:

//selecci贸n de div.node
const padre = document.querySelector('div.node');

//creaci贸n del elemento h2
const h2 = document.createElement('h2');

//creaci贸n del texto para h2
const texto = document.createTextNode('To my site');

---

//AGREGANDO NODOS
padre.appendChild(h2);
h2.appendChild(texto);

El resultado ser铆a el siguiente, el nodo es agregado al final del contenido del elemento padre:

<div class='node'>
    <h1> Welcome!</h1>
    <h2> To my site </h2>
</div>

parentElement.append()

  • Es la evoluci贸n de appendChild
  • Puedes agregar mas de un nodo
  • Se le puede agregar texto
  • No funciona adecuadamente en IE 11
<div class='node'>
    <p>Texto</p>
</div>

Vamos a agregar elementos

//seleccionando el elemento div.node
const parent = document.querySelector('div.node');

//Agregando elementos a parent
parent.append(document.createElement('div')), 'Esto es un texto');

El HTML quedar铆a as铆:

<div class='node'>
    <p>Texto</p>
    <div></div>
    'Esto es un texto'
</div>

parentElement.insertBefore()

  • Inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado.
  • Tiene dos argumentos, primero se le pasa el nodo a agregar y luego la referencia.
  • La referencia es hijo directo del nodo padre.
<div class='main'>
    <span>This is text</span>
    <small>This is small text</small>
</div>

Como se usa:

//seleccion de nodo padre
const parent = document.querySelector('.main');

//seleccion de referencia
const ref = document.querySelector('.main small');

//creacion del nodo a agregar
const nodo = document.createElement('div');

//Agregando nodo antes de la referencia
parent.insertBefore(nodo, ref);

El HTML quedar铆a as铆:

<div class='main'>
    <span>This is text</span>
    <div></div>
    <small>This is small text</small>
</div>

parentElement.insertAdjacentElement()

  • Es el m茅todo mas complicado, sin embargo da mucho mayo flexibilidad.
  • Nos permite insertar un nodo, bas谩ndose en una referencia
  • Como argumentos primero se debe pasar la posici贸n: beforebegin, afterbegin, beforeend o afterend y luego pasar el nodo a insertar.

Veamos un ejemplo:

<div class='main'>
    <span>This is text</span>
    <small>
        This is small text
    </small>
</div>

Agregando elementos:

//creaci贸n del nodo a insertar
const nodo = document.craeteElement('img');

//selecci贸n de la referencia
const ref = document.querySelector('small');

//Agregando elementos
ref.insertAdjacentElement('beforebegin', nodo);

El HTML quedar铆a as铆:

<div class='main'>
    <span>This is text</span>
    <img><!--beforebegin-->
    <small>
        <!--afterbegin-->
        This is small text
        <!--beforeend-->
    </small>
    	<!--afterend-->
</div>
//le debemos pasar una referencia para usarlo

ref.insetAdjacentElement 

const referencia = document.querySelector('h2')

//Genera la referencia 
<h2 > Checkout form </h2>

const nodo = document.createElement('span')

//Crea un nodo de <span>

//Crea el span antes del h2
referencia.insertAdjacentElement('beforebegin', nodo)

//Crea el span dentro del h2
referencia.insertAdjacentElement('afterbegin', nodo)

//Crea el span justo donde finaliza el H2, pero desde dentro
referencia.insertAdjacentElement('beforened', nodo)

//Crea el span despues de la etiqueta h2, afuera de esta
referencia.insertAdjacentElement('afterend', nodo)

Un metodo 鈥渃omplejo鈥 pero flexible

En base a nuestra refencia posicionaremos nuestro nuevo nodo (elemento) este se puede colocar arriba, abajo, izquierda o derecha

//Creamos nuestra referncia
const ref = document.querySelector('h1');

//Creamos lo que vamos a agregar
// En este caso creamos un elemento
const bloque = document.createElement('b');
// Le agregamos texto al elemento
bloque.append('Tu sitio web a sido intervenido');

/*Ahora si usamos nuestro nuevo metodo
el cual podemos usar en 4 formas*/
ref.insertAdjacentElement('beforebegin', bloque)
//ARRIBA 
ref.insertAdjacentElement('afterbegin', bloque)
// A LA IZQUIERDA
ref.insertAdjacentElement('beforeend', bloque)
// A LA DERECHA
ref.insertAdjacentElement('afterend', bloque)
//ABAJO

Agregar nodos antes

node.insertBefore

驴Como funciona?

Recibe 2 parametros (nodo, referencia)

Es muy importante menciona que para usar este metodo debemos tener un contenedor para tomar la referencia que esta dentro de ese contenedor

//Guardamos nuestra referencia en una variable
const contenedor = document.querySelector('div.pricing-header.p-3.pb-md-4.mx-auto.text-center');
const ref = document.querySelector('h1')
// En este caso creamos un elemento
const bloque = document.createElement('b');
// Le agregamos texto al elemento
bloque.append('Tu sitio web a sido intervenido');

//Ahora lo agregamos con el nuevo metodo before
contenedor.insertBefore(bloque, ref)

Actualizaci贸n node.append

  • Una caracteristica esencial es que solo lo soportan los navegadores mas actuales IE no lo acepta

驴Como se usa?

Cabe destacar que append puede puede recibir como parametro la creacion de un elemento o texto

/*Guardamos en una variable el elemento donde
partiremos a agregar elementos*/
const id = document.querySelector('p')

/*Simplemente le agregamos el ***texto*** o ***elemento***
que queremos*/
const bloque = document.createElement('div')
bloque.append('Nuevo Bloque JAJAJAJA')

id.append(bloque)

Como inyectamos codigo a nuestro DOM?

/*Guardamos en una variable el elemento donde
partiremos a agregar elementos*/
const id = document.querySelector('p')

/*Creamos el elemento que vamos a a帽adir*/
const contenido = document.createElement('b');

/*Para este caso usamos el metodo appendChild
para inyectar nuestro elemento en la parte 
de abajo*/
id.appendChild(contenido)
//Listo quedo inyectado el elemento

/*-------Hagamoslo visible-------------*/
/*Creamos un texto que inyectaremos al 
elemento creado*/
const texto = document.createTextNode(`
Sitio intervenido`);

//Nuevamente lo inyectamos
contenido.appendChild(texto)

por si se lo preguntan con ctrl + ` se agrega la segunda consola en la parte de bajo.

De esta clase podemos resumir y tener encuenta lo siguiente:
-Tener un nodo de referencia , esto lo hacemos leyendo el nodo dentro del cual queremos agregar el elemento.
-Despues de tener el nodo de referencia (esto es lo que hacemos con el querySelector-getElementsById o con alguno de los metodos que usamos para capturar algun elemento).
-Creamos el elemento (document.createElement(鈥榟1鈥).
-Despues de crearlo lo agregamos con appendChild o append , este seria por asi decirlo los pasos que se realizarian para crear y agregar elementos.

Me gustado full est茅 curso y eso que pensaba que no ten铆a suerte con Javascript. Vamos bien Platzi.

Si quieren agregarle texto a un nodo recien creado, en vez de hacer un createTextNode pueden usar:

const miH1 = document.createElement('h1')
miH1.innerText = 'Este es mi texto'

y pueden hacer lo que quieran con eso despues

de igual forma, despues de agregarle texto, pueden meterle otras propiedades como estilos, clases, etc etc.

ejemplo:

miH1.classList.add('d-flex') // clase de bootstrap para agergarle display:flex 

excelente clase

-parentElement.insertAdjacentElement(鈥榩osicion鈥, nodo a agregar );

Este es uno de los m茅todos mas poderosos y que mas flexibilidad nos da para agregar un nodo.
Posee 4 valores de posicion que podemos usar para posicionar el nodo agregar adyacente al nodo padre o nodo referencia, estos valores son :

鈥榖eforebegin鈥 : coloca el nodo antes del nodo referencia, fuera de este.

鈥榓fterbegin鈥: coloca el nodo justo despu茅s de la etiqueta de apertura del nodo referencia, dentro de este.

鈥榖eforeend鈥: coloca el nodo al final justo antes del la etiqueta de cierre del nodo referencia, dentro de este.

鈥榓fterend鈥: coloca el nodo despu茅s del nodo referencia, fuera de este.

Ejemplo: referencia.insertAdjacentElement(鈥榓fterend鈥, nodo);

createTextNode vs innerText?
stackoverflow

M脡TODOS PARA CREAR NODOS

algo muy simple pero que a muchos nos puede servir鈥
si estas en 鈥渆lements鈥 de las chrome dev tools, basta con dar 鈥渆sc鈥 para tener la console y elements en la misma tab

.insertAdjacentElement("beforeBegin",titulo)
<h2 titulo>
	.insertAdjacentElement("afterBegin",titulo)
**Soy titulo**
	.insertAdjacentElement("beforeEnd",titulo)
</h2>
.insertAdjacentElement("afterEnd",titulo)

Wooo dure aproximadamente una hora haciendo muchas combinaciones, pienso que despu茅s de un tiempo de experiencia podemos usar .insertAdjacentElement. 馃槂

Una coleccion de elementos para crear y agregar nodos son:

document.createElement() 鈫 Para crear un elemento

document.createTextContent () 鈫 Crear un Texto

CREAR UN ELEMENTO NO QUIERE DECIR QUE SE AGREGUE AL DOM, esta creacion sucede en memoria y podemos asigar a una variable PERO NO SE A AGREGADO

document.createTextNode () 鈫 Para crear un texto, no sera mas que texto

Para agregar nodos al DOM hay muchas formas y depende de las necesidades en especifico

  • parentElement.appendChild() 鈫 Necesitamos un Nodo de referencia y agregara
    los elementos al final

EJEMPLO:

// 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 evoulucion del anterior, podemos agregar mas de un nodo, podemos agregar un texto PERO NO FUNCIONA EN INTERNET EXPLORER. Si necesitamos, debemos agregar un Polyfill
  • parentElement.insertBefore(鈥榓gregar鈥, 鈥榬eferencia鈥) 鈫扞nserta antes del NODO que pasemos como referencia. EL NODO DE REFERENCIA TIENE QUE SER HIJO DIRECTO DEL NODO BASE
  • parentElement.insertAdjacentElement() 鈫扙s el mas complicado para agregar un nodo en HTML o DOM, pero es el mas poderoso y mas flexible para agregar nodos: Su ultilizacion es:
referencia.insertAdjacentElement('posicion', NUEVO) ;

Posiciones:

  1. beforebegin:聽Lo inserta antes del nodo
  2. afterbegin:聽Lo inserta despues del nodo
  3. beforeend:聽Lo inserta antes de donde finaliza el nodo
  4. afterend:聽Lo inserta despu茅s de donde finaliza el nodo

Es muy cierto lo que dice el profesor, sobre que no es necesario aprendernos de memoria todos estos conceptos, pues por mas experiencia que uno tenga, siempre le toca de vez en cuando consultar la documentaci贸n para recordar c贸mo funciona una API. As铆 que tranquilos sino entendemos a la primera鈥 馃槈

Hay dos tipos de nodos que podemos crear:
.

  • document.createElement: Con este m茅todo podemos crear un nodo, por ejemplo document.createElement('div'). Con crear un elemento no quiere decir que se agrega al DOM. El elemento se almacena en memoria hasta que nosotros lo agreguemos al DOM.
  • document.createTextContent: Con este m茅todo creamos el texto que queramos asignarle a un nodo, aunque pasemos texto HTML con este m茅todo, este ser谩 tratado como texto y nada m谩s.
    .

Hay muchas maneras de agregar nodos, el cu谩l vamos a utilizar depende de nuestra necesidad. Entre los m茅todos para agregar un nodo encontramos:

  • document.appendChild: De esta manera agregamos un nodo al final del elemento que estemos seleccionando.
// seleccionamos el elemento
const container = document.querySelector(".class")
// creamos un elemento nuevo
const h3 = document.createElement('h3')
// insertamos el elemento nuevo como hijo
container.appendChild(h3)
// creamos un nodo de texto
const texto = document.createTextNode('holis')
// insertamos el nodo de texto
h3.appendChild(texto)
  • document.append: Es la evoluci贸n de document.appendChild. Puedes agregar m谩s de un nodo, puedes agregar texto. Es muy comodo para agregar texto sin tener que utilizar document.creatTextNode.
container.append('hola 2', document.createElement('div'))

Antiguo DOM:

div
|
|__<other div>

Nuevo DOM:

div
|
|__<other div>
|__'hola 2'
|__<div>
  • document.insertBefore: A diferencia de los m茅todos anteriores, este a帽ade el nodo antes del mismo. Su sintaxis ser铆a:

    let insertedNode = parentNode.insertBefore(newNode, referenceNode).

    1. insertedNode: El nuevo nodo a insertar.

    2. parentNode: El nodo padre del nuevo nodo.

    3. newNode: El nodo a insertar.

    4. referenceNode: El nodo de referencia, el nuevo nodo se a帽ade antes de este. En caso de que este nodo referencia sea null entonces el nuevo nodo ser谩 a帽adido al final de los hijos del nodo padre.

      Hay que tener en cuenta, que el nodo referencia debe ser hijo directo del nodo padre (document, en este caso), no puede estar m谩s profundo en el 谩rbol.

document.insertBefore('h1', 'p');

Antiguo DOM:

div
|__p

Nuevo DOM:

div
|__h1
|__p
  • NodoReferencia.insertAdjacentElement: A pesar de ser el m茅todo m谩s complicado, es el que nos ofrece mayor flexibilidad para a帽adir un nodo. Este m茅todo recibe como argumentos los siguientes par谩metros: NodoReferencia.insertAdjacentElement(position, element), donde position puede ser beforebegin, beforeend, afterbegin y afterend. Mientras que element representa el nodo que ser谩 insertado.

    • beforebegin: Esta posici贸n hace referencia a la posici贸n anterior de nuestro nodo referencia.
    const referencia = document.querySelector('h2');
    const nodoNuevo = document.createElement('span');
    
    referencia.insertAdjacentElement('beforebegin', nodoNuevo);
    
    Antiguo DOM:
    
    h2
    |_ textNode
    
    Nuevo DOM:
    
    span
    |
    h2
    |_ textNode
    
    • beforeend: Despu茅s del 煤ltimo elemento hijo del elemento referencia.
    const referencia = document.querySelector('h2');
    const nodoNuevo = document.createElement('span');
    
    referencia.insertAdjacentElement('beforeend', nodoNuevo);
    
    Antiguo DOM:
    
    h2
    |_ textNode
    
    Nuevo DOM:
    
    h2
    |_ textNode
    |_ span
    
    • afterbeing: Antes del primer hijo del elemento referencia.
    const referencia = document.querySelector('h2');
    const nodoNuevo = document.createElement('span');
    
    referencia.insertAdjacentElement('afterbeing', nodoNuevo);
    
    Antiguo DOM:
    
    h2
    |_ textNode
    
    Nuevo DOM:
    
    h2
    |_ span
    |_ textNode
    
    
    • afterend: Despu茅s del elemento referencia.
    const referencia = document.querySelector('h2');
    const nodoNuevo = document.createElement('span');
    
    referencia.insertAdjacentElement('afterend', nodoNuevo);
    
    Antiguo DOM:
    
    h2
    |_ textNode
    
    Nuevo DOM:
    
    h2
    |_ textNode
    |
    span
    
    

    En resumidas cuentas, se ver铆a algo as铆:

    <!-- beforebegin -->
    <p>
      <!-- afterbegin -->
      foo
      <!-- beforeend -->
    </p>
    <!-- afterend -->
    

Muy completa esta clase.

  • document.createElement("element"), crea una etiqueta HTML.
  • document.createTextContent("texto"), crea un texto.
  • parentElement.appendChild, Agrega el elemento al final del elemento padre.
  • parentElement.append, Evoluci贸n de appendChild, puede agregar mas de un nodo, agregar un texto, no soportado por IE11.
  • parentElement.insertBefore(element,reference), Agrega un elemento antes de la referencia.
  • parentElement.insertAdjacentElement(beforebegin|afterbegin|beforeend|afterend, element)

Espero les sirva como a mi me sirvio escribirlo

/* multi-insert ------------------------------------------*/
const nav = document.querySelector('.nav')
const span = document.createElement('span')

nav.insertAdjacentElement('beforebegin', span) /* como hermano antes de nav */
/* <nav> */
nav.insertAdjacentElement('afterbegin', span) /* como hijo al principio de nav */
		/* <.../> */
nav.insertAdjacentElement('beforeend', span) /* como hijo al final de nav */
/* </nav> */
nav.insertAdjacentElement('afterend', span) /* como hermano despues de nav */

Porque me salen estos errores:

Buena clase

Genial

Matodos para agregar Nodos

-	container.appendChild(Nodo que quiero agregar)
-	container.append(Nodos que quiero agregar)
-	container.insertBefore(Nodo que queremos agregar, Referencia)
-	container.insertAdjacentElement(Opciones: 鈥漛eforebegin鈥, 鈥渁fterbegin鈥, 鈥渂eforeend鈥, 鈥渁fterend鈥), Nodo que queremos agregar)

Esta melito el curso ajsdfajsd

Algo que me ayud贸 a entender los elementos beforebegin, beforeend, afterbegin and afterend es usar como referencia los tags de apertura y de cierre de nuestro elemento y entender que estos elementos lo que hacen es colocarlo antes o despu茅s de que nuestros tags de apertura/cierre est谩n ubicados. Me explico:

  • Beforebegin pone nuestro elemento antes de que el tag de apertura de nuestro elemento inicie. Es decir, quedar铆a como un elemento dentro del mismo contenedor padre y estar铆a ubicado justo antes de este.
<span>Elemento creado con beforebegin</span> // Nodo
<h2>Soy un t铆tulo</h2> // Referencia
  • Afterbegin inserta nuestro elemento despu茅s de que el tag de apertura de nuestro elemento termina. En la pr谩ctica significar铆a que nuestro elemento insertado ser铆a un elemento hijo del elemento de referencia y este quedar铆a justo como su primer elemento.

<h2>
	<span>Elemento creado con beforebegin</span> // Nodo
	Soy un t铆tulo
</h2> // Referencia
  • Beforeend inserta nuestro elemento antes de que el tag de cierre del elemento de referencia inicie. En la pr谩ctica significar铆a que nuestro elemento insertado ser铆a un elemento hijo del elemento de referencia y quedar铆a ubicado como el 煤ltimo elemento de este.

<h2>
	Soy un t铆tulo
	<span>Elemento creado con beforeend</span> // Nodo
</h2> // Referencia
  • Afterend pone nuestro elemento despu茅s de que el tag de cierre de nuestro elemento termine. Es decir, quedar铆a como un elemento dentro del mismo contenedor padre y estar铆a ubicado justo despu茅s de este.
<h2>Soy un t铆tulo</h2> // Referencia
<span>Elemento creado con afterend</span> // Nodo

Espero esto ayude a dar una luz sobre el tema en el caso de que los m茅todos de insertAdjacentElement haya resultado un poco confuso.

Holita, tenia entendido que append es de jQuery

Append no funciona en IE pero en edge? si o no

Que buena clase, me gust贸 el texto de 鈥渉olita鈥 jaja 馃槀馃憦