Crear y agregar

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

• 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

• 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

• 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

• 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

• 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 “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:

  • 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!!!

COLOR NEGRO ES MI REFERENCIA

referencia.insertAdjacentElement("beforebegin",nodo)

referencia.insertAdjacentElement("afterend",nodo)

referencia.insertAdjacentElement("beforeend",nodo)

referencia.insertAdjacentElement("afterbegin",nodo)

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

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:

• ‘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.

<!-- 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 “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 🤔

  • 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

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

Wow, me quedó claro lo de la posición de insertAdjacentElement 😄

Mis apuntes en Notion💚

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(“h1”),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 “complejo” 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(‘h1’).
-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(‘posicion’, 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 :

‘beforebegin’ : coloca el nodo antes del nodo referencia, fuera de este.

‘afterbegin’: coloca el nodo justo después de la etiqueta de apertura del nodo referencia, dentro de este.

‘beforeend’: coloca el nodo al final justo antes del la etiqueta de cierre del nodo referencia, dentro de este.

‘afterend’: coloca el nodo después del nodo referencia, fuera de este.

Ejemplo: referencia.insertAdjacentElement(‘afterend’, nodo);

createTextNode vs innerText?
stackoverflow

MÉTODOS PARA CREAR NODOS

algo muy simple pero que a muchos nos puede servir…
si estas en “elements” de las chrome dev tools, basta con dar “esc” 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(‘agregar’, ‘referencia’) →Inserta antes del NODO que pasemos como referencia. EL NODO DE REFERENCIA TIENE QUE SER HIJO DIRECTO DEL NODO BASE
• parentElement.insertAdjacentElement() →Es 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: ”beforebegin”, “afterbegin”, “beforeend”, “afterend”), 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 “holita” jaja 😂👏