Cambio de texto y contenido HTML
Actualice el contenido con textContent e innerHTML.
Cambio de texto y contenido HTML es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Leer y escribir texto
Para cambiar lo que muestra un elemento, puede establecer su texto o su HTML. La opción adecuada depende de si necesita marcado y de cuánto confía en los datos.
textContent
textContent obtiene o establece el texto sin formato de un elemento. Al establecerlo, reemplaza todos los elementos secundarios por un único nodo de texto y trata la entrada como texto sin formato.
const el = document.querySelector("#status");
el.textContent = "Saved!";textContent escapa el marcado
Como es texto sin formato, cualquier HTML de la cadena se muestra literalmente, no se analiza. Esto lo protege frente a la inyección.
el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>innerHTML
innerHTML obtiene o establece el marcado HTML dentro de un elemento. Al establecerlo, analiza la cadena como HTML y crea nodos reales.
const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";innerHTML reemplaza todo
Asignar un valor a innerHTML descarta los elementos secundarios existentes y reconstruye el subárbol a partir del nuevo marcado.
box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";El peligro de XSS
No introduzca nunca datos de usuario no confiables en innerHTML. Una cadena maliciosa puede inyectar scripts o controladores de eventos, una vulnerabilidad llamada XSS.
const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;innerText
innerText es similar a textContent, pero tiene en cuenta los estilos: refleja el texto renderizado e ignora los elementos ocultos.
console.log(el.innerText); // visible text onlytextContent frente a innerText
textContent devuelve todo el texto, incluido el contenido oculto, y es más rápido porque no activa el diseño. innerText tiene en cuenta el diseño y es más lento.
el.textContent; // all text, even display:none
el.innerText; // only what is visually renderedAñadir texto de forma segura
Para añadir texto sin eliminar los nodos existentes, cree un nodo de texto o use insertAdjacentText en lugar de sobrescribir textContent.
el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");Insertar HTML sin volver a analizarlo
insertAdjacentHTML añade marcado en una posición sin volver a analizar todo el elemento, lo que resulta más eficiente que reconstruir innerHTML.
box.insertAdjacentHTML("beforeend", "<li>New item</li>");Elegir la propiedad adecuada
Use textContent para texto sin formato (la opción segura predeterminada), innerHTML solo con marcado confiable y innerText cuando necesite específicamente texto renderizado y visible.
Comprobación rápida
Elija el enfoque seguro.
Repaso
textContent establece texto sin formato y escapado, y es la opción segura predeterminada. innerHTML analiza el marcado, pero implica riesgos de XSS con entradas no confiables. innerText refleja únicamente el texto visible y renderizado. Para añadir contenido, prefiera insertAdjacentHTML/insertAdjacentText en lugar de sobrescribir todo el elemento.
Preguntas frecuentes
¿La lección «Cambio de texto y contenido HTML» es gratis?
Sí — el texto completo de «Cambio de texto y contenido HTML» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Cambio de texto y contenido HTML»?
Actualice el contenido con textContent e innerHTML. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Cambio de texto y contenido HTML»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cambio de texto y contenido HTML
- Creación e inserción de elementos
- Modificación de atributos y clases
- Eliminación y sustitución de nodos