Cargando...

Crear elementos

En el corcho de la cocina ya hay una nota: milk. La lista es #board. Esa nota es un li con id milk. El marcado va en una sola línea, así que no hay un nodo de texto vacío por un salto de línea.
Quieres añadir tea, bread y eggs. No armes la etiqueta con una cadena. document.createElement("li") te da un li nuevo que todavía no está en el documento. parentElement es null. document.body.contains es false. board.children.length sigue en 1, porque solo está milk.
textContent = "tea" escribe la palabra en ese objeto. No lo cuelga de la página.
board.append(tea) lo pone al final. El resultado de la llamada es undefined. No te devuelve el nodo. appendChild sí te devuelve ese nodo; esta página usa append. prepend pone el pan al principio. insertBefore(eggs, milk) coloca los huevos justo antes de milk, y milk ya es hijo del tablero. El orden queda bread, eggs, milk, tea. children.length pasa a 4.
Un ensayo aparte, solo en el tablero intacto: createTextNode("salt"). Eso es un nodo de texto, no un li. Si lo anexas, children.length se queda en 1. childNodes.length pasa de 1 a 2. nodeType es 3. El último elemento sigue siendo milk. La demo de la página no anexa la sal.
La línea bajo el tablero dice bread / eggs / milk / 4. tea está en la lista, no en esa línea. El 4 es la cuenta de elementos. El texto milk sigue siendo milk. Aquí no tocas ninguna propiedad CSS.

Nodos nuevos, no otra capa de pintura

La página anterior escribió style, setProperty, classList y cssText en una muestra de pintura. No creó ningún nodo. La de antes cambió palabras con textContent, innerHTML e insertAdjacentHTML. Aquí no asignas style, no analizas una cadena HTML y no reescribes la palabra milk. getElementById solo te da el tablero y la nota milk. Las filas nuevas salen de createElement.

Dónde cae cada nodo nuevo

El tablero empieza con un li: milk. Lee las filas en orden. La fila de la sal es un ensayo en ese tablero intacto, antes de que existan tea, bread y eggs. La demo se detiene en insertBefore y no anexa la sal.

📊 Dónde cae cada nodo nuevo

Llamada Dónde queda el nodo Hijos elemento Confusión fácil
createElement("li") en ningún sitio; parentElement es null sigue 1, milk creer que ya está en el tablero
textContent = "tea" sigue en ningún sitio sigue 1 creer que la palabra inserta un li
append(tea) al final; el resultado es undefined 2: milk, luego tea esperar que append devuelva el nodo
prepend(bread) al principio 3: bread, milk, tea cambiar prepend por append
insertBefore(eggs, milk) justo antes de milk 4: bread, eggs, milk, tea una referencia que no es hija del tablero
append(createTextNode("salt")) en el tablero intacto nodo de texto tras milk, no un li sigue 1 que children.length pase a 2

createElement construye el nodo en memoria. El tablero no cambia hasta que un método lo coloca. children cuenta solo hijos elemento. Un nodo de texto está en childNodes y no en children. append y prepend devuelven undefined. appendChild devuelve el nodo que le pasas. append acepta un nodo o una cadena; la cadena se vuelve nodo de texto. appendChild acepta un nodo, y una cadena lanza un error. insertBefore necesita una referencia que ya sea hija de ese padre. Si pasas null, el nodo va al final, la misma idea que append. Esta página pasa milk, no null. Si anexas un nodo que ya está en el tablero, se mueve. No se copia.

El li nuevo todavía no está en el tablero

El archivo abre con la lista de una línea. Aún no has creado nada. Las cuatro lecturas preguntan por el nodo nuevo y por el tablero, antes del texto y antes de colgarlo.

Nota suelta

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);

Las salidas son null, false, 1 y una cadena vacía. El navegador tiene un objeto li de verdad. No tiene padre. El único hijo elemento sigue siendo milk. La palabra milk es de esa nota vieja, no de la nueva.

La palabra tea todavía no lo inserta

textContent cambia el texto del nodo que ya tienes. No es un método de inserción. La lista de hijos del tablero no crece.

Texto, aún suelto

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);

Las salidas son tea, false y 1. Lees la palabra en el objeto. La página sigue mostrando solo milk. contains es false porque el nodo no está bajo el documento.

append deja el té al final

append añade el nodo como último hijo. La variable fromAppend guarda el resultado de la llamada, que es undefined, no el li. Después, el padre es el tablero y el texto del último elemento es tea. El orden es milk y luego tea.

Anexar el té

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);

Las salidas son undefined, true, tea y 2. appendChild(tea) habría mostrado ese mismo nodo. Este fragmento no llama a appendChild. milk sigue siendo el primer hijo elemento.

prepend e insertBefore fijan el orden

Este fragmento vuelve a empezar en el tablero original y coloca tres veces. prepend corre cuando tea ya está al final, así que bread queda como primer hijo. insertBefore(eggs, milk) usa milk como referencia, así que eggs queda entre bread y milk. Los cuatro textos son bread, eggs, milk, tea.

Colocar pan y huevos

javascript 
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);

Las salidas son bread, eggs, milk y tea. children.length es 4. El índice 1 es eggs, no milk. milk pasa del índice 0 al 2 porque dos notas quedaron delante. El texto de milk sigue siendo la palabra milk.

Un nodo de texto no entra en children

Ejecuta este bloque en el tablero intacto, la lista original de una línea, no después del script de la página. createTextNode construye un nodo de texto. nodeType 3 significa texto. nodeType 1 sería un elemento. children lo ignora, así que la longitud sigue en 1. childNodes lo cuenta, así que esa longitud pasa de 1 a 2. El último elemento sigue siendo la nota milk. Puedes ver la palabra salt en la lista, y aun así no es un li.

Nodo de texto sal

javascript 
let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);

Las salidas son 3, 1, 2 y milk. Una cadena pasada a append, como board.append("salt"), también se vuelve nodo de texto. No se vuelve un li. La demo de más abajo no incluye esta línea.

Una línea bajo el tablero

El script está al final de body, cuando la lista ya existe. Anexa tea, antepone bread e inserta eggs antes de milk. No crea salt. Escribe el índice 0, el 1, el 2 y la cuenta de elementos. No escribe el cuarto texto, tea.

Demo de la página — tablero

html 
<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>

La línea queda bread / eggs / milk / 4. La lista en sí es bread, eggs, milk, tea. La línea se detiene en el tercer ítem y luego da la longitud, así que tea no es el último tramo y el último tramo no es una palabra. salt no está. El texto de la nota milk sigue siendo milk. La página siguiente son los eventos. No añade otra forma de construir estos nodos.

Revisa el tablero

  1. Crea el li y lee parentElement, document.body.contains, children.length y textContent. Los valores son null, false, 1 y una cadena vacía.
  2. Pon el texto tea y lee el texto, contains y la longitud. Los valores son tea, false y 1.
  3. Anexa tea y lee el resultado de la llamada, si el padre es el tablero, el texto del último elemento y la longitud. Los valores son undefined, true, tea y 2. Luego ejecuta el fragmento del orden y lee bread, eggs, milk, tea.
  4. En el tablero intacto, anexa el nodo de texto sal y lee nodeType, children.length, childNodes.length y el id del último elemento. Los valores son 3, 1, 2 y milk. La línea de la página: bread / eggs / milk / 4.

Tropezones de este tablero

La lista sigue abriendo con milk. La llamada fue el tipo de inserción equivocado.

  • Esperar que createElement("li") muestre tea en el tablero al momento
  • Esperar que textContent = "tea" suba children.length
  • Esperar que append devuelva el li; eso lo hace appendChild
  • Pasar una cadena a appendChild; la cadena va en append y allí se vuelve nodo de texto
  • Llamar a insertBefore con una referencia que no es hija del tablero
  • Contar el nodo de texto sal dentro de children
  • Armar la fila nueva con innerHTML; la página de cambiar HTML analizaba marcado
  • Poner style.color aquí; la página anterior escribió CSS
  • Leer la línea como bread / eggs / milk / tea
  • Llamar a remove o cloneNode aquí; esta página solo añade las tres notas

Llévate esto

  • createElement("li") arma una nota suelta: parentElement es null y children.length sigue en 1
  • textContent = "tea" escribe la palabra y deja el nodo fuera del tablero
  • append(tea) pone tea al final y el resultado de la llamada es undefined
  • prepend(bread) e insertBefore(eggs, milk) dejan el orden bread, eggs, milk, tea
  • createTextNode("salt") en el tablero intacto deja children.length en 1 y nodeType en 3
  • La línea queda bread / eggs / milk / 4, y el texto milk sigue siendo milk

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 48 de 48
Javascript Tutorial