Cargando...

Cambiar el HTML

Un vale de ferry ya está en la página: el barco se llama Gull, la hora es 09:10 y la nota dice Boarding. Cambiar el HTML es escribir contenido nuevo en un elemento que ya tienes. boat.textContent = "Heron" guarda las palabras Heron. note.textContent = "<em>Late</em>" muestra esos caracteres, y note.querySelector("em") es null. note.innerHTML = "<em>Late</em>" construye un em cuyo texto es Late. Después, note.textContent es Late, mientras note.innerHTML sigue llevando las etiquetas. Una segunda escritura, note.innerHTML = "Dock 2", borra el em. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") conserva Dock 2 y añade gate B, así que la nota dice Dock 2 gate B. Nada asigna la hora, así que sigue en 09:10.

Escribir, no buscar otra vez

La página anterior comparó formas de encontrar un nodo. Esta no cuenta una colección, no lee un índice y no recorre parentElement. getElementById solo te da el vale. La lección es el valor que asignas.

Qué deja cada escritura en la nota

La nota empieza como Boarding. Lee las filas en orden. Cada asignación sustituye la nota o la alarga.

📊 Qué deja cada escritura en la nota

Escritura Qué ves Qué queda Confusión fácil
textContent = "Heron" en el barco Heron un nodo de texto un elemento llamado Heron
textContent = "<em>Late</em>" los caracteres <em>Late</em> ningún elemento em un em de verdad
innerHTML = "<em>Late</em>" Late un em esperar las etiquetas en textContent
innerHTML = "Dock 2" Dock 2 el em ya no está el em junto a Dock 2
insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 gate B Dock 2 más un span innerHTML, que tira Dock 2

textContent guarda una cadena y no interpreta etiquetas. innerHTML interpreta etiquetas y tira cada hijo que el elemento ya tenía. insertAdjacentHTML también interpreta etiquetas, pero beforeend coloca los nodos nuevos después del contenido actual. El nombre de un barco escrito en ventanilla va en textContent. La misma cadena en innerHTML trataría un signo menor-que como marcado.

Lee el vale antes de escribir

El archivo abre con tres valores. Todavía no hay ninguna asignación.

Leer el vale

javascript 
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);

Los registros son Gull, 09:10 y Boarding. La hora es un párrafo aparte. Las escrituras posteriores no tocan when.

Las palabras siguen siendo palabras

textContent sustituye cada hijo por un nodo de texto. Los caracteres que parecen una etiqueta siguen siendo caracteres.

Palabras sueltas

javascript 
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));

La primera línea es Heron. La segunda son los caracteres <em>Late</em>. La tercera es null. La nota muestra la etiqueta como texto y no ha creado un elemento.

innerHTML construye el elemento

Pasa esos mismos caracteres a innerHTML. El analizador los convierte en nodos y sustituye lo que había en la nota.

Marcado analizado

javascript 
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);

La primera línea es Late. La segunda es <em>Late</em>, porque innerHTML devuelve el marcado, etiquetas incluidas. La tercera es false: el em está, así que no es null. Las palabras visibles y la cadena de marcado son dos lecturas del mismo elemento.

El siguiente innerHTML borra el em

Un valor nuevo de innerHTML sustituye toda la nota. El em no se queda al lado del texto nuevo.

Sustituir otra vez

javascript 
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));

La primera línea es Dock 2. La segunda es null. Boarding ya no estaba. Esta escritura se lleva también el em.

Añade gate B y conserva Dock 2

insertAdjacentHTML("beforeend", ...) analiza un fragmento y lo pone al final. Esta cadena empieza con un espacio para que las dos partes sigan siendo dos palabras. Hay otras posiciones. Esta página solo usa beforeend.

Añadir al final

javascript 
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);

La primera línea es Dock 2 gate B. La segunda es gate B. Dock 2 sigue en la nota. Asignar esa misma cadena del span con innerHTML habría borrado Dock 2.

Una línea bajo el vale

El script está al final de body, cuando el vale ya existe. Guarda la palabra Late antes de que Dock 2 sustituya al em, y luego escribe una línea con el barco, esa palabra guardada y la nota después de añadir gate B.

Demo de página — vale del ferry

html 
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>

La línea dice Heron / Late / Dock 2 gate B. La hora sigue siendo 09:10. Late en la línea es la palabra guardada antes del borrado. La nota ya no dice Late. La página siguiente cambia el CSS de elementos como estos y no añade otra forma de encontrarlos.

Revisa el vale

  1. Muestra los tres textos iniciales y espera Gull, 09:10 y Boarding
  2. Pon el barco en Heron y la nota en los caracteres em; espera esa cadena y un em null
  3. Pon innerHTML en la cadena em; espera textContent Late, innerHTML aún con etiquetas, y un em que no es null
  4. Pon innerHTML en Dock 2 y espera null para em
  5. Añade el span con beforeend y espera Dock 2 gate B, luego el texto del span gate B
  6. Lee la línea y espera Heron / Late / Dock 2 gate B; lee la hora y espera 09:10

Fallos en este vale

La página se abre igual. La asignación escribió el tipo de valor equivocado.

  • Meter en innerHTML un nombre escrito en ventanilla, donde < se vuelve marcado
  • Esperar que textContent = "<em>Late</em>" cree un em
  • Leer textContent después de escribir el em y esperar las etiquetas en esa cadena
  • Asignar innerHTML otra vez y esperar que el em siga
  • Añadir gate B con innerHTML y perder Dock 2
  • Quitar el espacio inicial, de modo que la nota diga Dock 2gate B
  • Poner style aquí; la página siguiente cambia el CSS
  • Llamar a createElement aquí; una página posterior crea nodos nuevos

Qué te llevas

  • textContent escribe texto plano y no interpreta etiquetas
  • innerHTML interpreta etiquetas y sustituye cada hijo
  • Tras escribir el em, textContent es Late e innerHTML sigue con las etiquetas
  • Un segundo innerHTML borra el em
  • insertAdjacentHTML("beforeend", ...) añade marcado y conserva Dock 2
  • La hora sigue en 09:10 porque nadie la asigna
  • La línea dice Heron / Late / Dock 2 gate B

🧠 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 46 de 47
Javascript Tutorial