Cursos Empresas Blog Live Conf Precios

Crear y agregar

Curso de Manipulación del DOM

Contenido del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

26
Proyectos propuestos
04:17 min

Librerías relacionadas

Conclusiones

29
Conclusiones
01:56 min

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)

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.

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

/*  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);```

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