Modificar texto en HTML con JavaScript

Clase 7 de 27 • Curso de JavaScript: Manipulación del DOM

Contenido del curso

Entendiendo el DOM

Seleccionando y Accesando a Elementos del DOM

Manipulando Elementos del DOM

Manipulando Eventos en el DOM

Asincronía en JavaScript

20
Programación Síncrona y Asíncrona en JavaScript
04:37 min

Creando un Administrador de Tareas

Tomar examen

Resumen

Modificar el texto de un elemento HTML de forma dinámica es una de las tareas más comunes cuando trabajas con el DOM en JavaScript. Existen dos propiedades principales que te permiten lograrlo: textContent e innerText. Ambas cumplen un propósito similar, pero es importante conocer cómo funcionan y cuándo usarlas.

¿Cómo seleccionar un elemento del DOM para modificar su texto?

Antes de modificar cualquier texto, necesitas obtener una referencia al elemento HTML que deseas cambiar. Esto se hace guardando el nodo en una constante mediante document.querySelector [0:27].

Por ejemplo, si tienes un <h1> con un id="title", puedes seleccionarlo así:

javascript const titulo = document.querySelector('#title');

El símbolo # indica que estás buscando por ID.
También podrías buscar directamente por la etiqueta h1 si solo existe una en el documento.
Una vez almacenado en la constante, ya tienes acceso a todas las propiedades del nodo.

Para inspeccionar esas propiedades, puedes usar console.dir(titulo) en la consola del navegador [1:05]. Esto te muestra el nodo como un objeto JavaScript con todas sus propiedades disponibles.

¿Qué es textContent y cómo se usa para cambiar texto?

La propiedad textContent representa todo el contenido de texto dentro de un nodo [1:15]. Al acceder a ella, puedes leer el texto actual del elemento.

Para modificarlo, simplemente asignas un nuevo valor:

javascript titulo.textContent = 'Nuevo texto';

Al ejecutar esta línea, el cambio se refleja visualmente en el navegador de inmediato [1:35].
Si inspeccionas el HTML en el documento, verás que la etiqueta <h1> ahora contiene el texto actualizado.
textContent devuelve todo el texto del nodo, incluyendo el de elementos hijos ocultos.

¿Cuál es la diferencia entre innerText y textContent?

Otra forma de modificar el texto es mediante la propiedad innerText [2:05]. Funciona de manera similar:

javascript titulo.innerText = 'Este es otro título';

Al poner titulo.innerText sin asignar un valor, la consola te muestra el texto contenido dentro del elemento.
Al asignarle un nuevo string, el texto se actualiza tanto en la vista como en el HTML del documento [2:30].

La diferencia sutil entre ambas propiedades es que innerText respeta el estilo visual del elemento, es decir, no incluye texto de elementos ocultos con CSS. En cambio, textContent devuelve absolutamente todo el contenido de texto sin importar si está visible o no.

¿Cuáles son los pasos para modificar texto en el DOM?

El proceso se resume en una secuencia clara:

Selecciona el elemento que contiene el texto que deseas cambiar usando querySelector.
Lee el texto actual accediendo a .textContent o .innerText.
Asigna el nuevo valor con el operador = y el texto deseado entre comillas.

Esta técnica es la base para construir interfaces dinámicas donde el contenido cambia según el comportamiento del usuario en la plataforma. Dominar estas dos propiedades te da control directo sobre lo que el usuario ve en pantalla sin necesidad de recargar la página.

¿Has usado alguna de estas propiedades en tus proyectos? Comparte tu experiencia en los comentarios.

Comentarios

Daniel Andres Rojas Paredes

student•

Diferencias entre atributos/propiedades de texto:

textContent: contiene el texto plano (sin etiquetas ni formatos)

innerText:Contiene el texto despues de haberle aplicado Css.

innerHtml: contiene el el texto y el formato y las etiquetas html.

La seguridad de un sitio se puede ver afectada por la manipulacion de los 2 ultimos, abiendo la puerta a ataques xss de ser manejados de manera incorrecta.

Nahuel cordero

student•

Gran dato, gracias. Estaría bueno que el profesor de la clase aclare este tipo de cosas, aunque sea por encima siempre sirve tenerlo en cuenta.

Deivis Andrés Cervantes

student•

La diferencia principal entre textContent e innerText es que text content edita el texto y NO tiene en cuenta el estilo del elemento, mientras que innerText solo puede editar textos que sean visibles por el usuario, es decir, que SÍ tiene en cuenta los estilos.

Kyb3r Cipher

student•

innerText y textContent son dos propiedades de los nodos DOM en JavaScript que se utilizan para manipular el texto de los elementos HTML, pero tienen diferencias clave.

innerText: Devuelve el texto visible en el navegador, ignorando el texto oculto. También es sensible a los estilos CSS.
textContent: Devuelve todo el texto de un nodo, incluyendo el texto oculto. No tiene en cuenta los estilos.

Ejemplo en HTML:

<div id="ejemplo">
  <p>Texto visible</p>
  <p style="display:none;">Texto invisible</p>
</div>

Código JavaScript:

let ejemplo = document.getElementById('ejemplo');

console.log(ejemplo.innerText); // "Texto visible"
console.log(ejemplo.textContent); // "Texto visibleTexto invisible"

En resumen, usa innerText para obtener solo el texto que se ve, y textContent para obtener todo el texto del nodo.

Matias Ezequiel Rivero

student•

Gracias por la info, estaría bueno que en las clases se mencione estas diferencias, cuando en el ejemplo el resultado es el mismo.

Karen Benites Segura

student•

Algo curioso con el textContent, es que su valor cuando inspeccionas el objeto "ejemplo" con console.dir, sale así:

textContent: "\n Texto visible\n Texto invisible\n "

Es decir, textContent considera incluso los saltos de línea dentro de su cadena.

Al imprimir innerText y TextContent en consola se pueden ver esos saltos de linea

Carlos Eduardo Mayorga Rodríguez

student•

En el video 7 minuto 2:42 menciona que se ha modificado el título visualmente, PERO, cuando se menciona pero es para indicar que algo no se ha hecho, no para indicar PERO TAMBIEN, es importante ser precisos en los comentarios, dado que al ser videos cortos y no libros extensos, puede dar a entender cosas que no son.

Natalia Gallego Heras

student•

Me ha costado bastante entender cuál era error que señalabas, creo que habrías preferido que el profesor dijera "podemos ver que visualmente ya tenemos el cambio, pero, además, si yo voy a ver el HTML ➡️ document y me voy a ver esa etiqueta (la etiqueta de <h2>, adentro del <header>, puedo ver que hemos modificado aquí de igual forma ya el texto. Superbién".

En lugar de "pero" sin el "además".

Lamento que te confundiera, creo que lo dijo en contraposición a la clase anterior, cuando JavaScript no cambió el HTML inicial.

Daniel Andres Rojas Paredes

student•

Tienes razon, sin embargo aca una suposicion del porque paso esto, no todas las propiedades estan sincronizadas con los atributos, supongo que en un comienzo se le cruzo la idea que el atributo en Html no habia cambiado, son lapsus que nos pueden pasar a todos.

Miguel Angel Castillo Enriquez

student•

Min 2.55 De Granda se da cuenta que si se cambio en HTML like si entendiste.

Pastor Alexander Castro Aguilar

student•

¿Cual de las dos forma de moficar texto es más recomendada?

Augusto Eduardo Bonalumi

student•

En base a tu pregunta encontré esto en Medium:

Mathías Cabrera

student•

ERROR EN EL EXAMEN DEL CURSO

Erik Isaac Cruz Vazquez

student•

Tienes razon a mi me da el mismo error. Que rayos

Diego Peraza

student•

Depronto hubiera sido mejor poner la opción como "solo text content" para que fuera depronto más claro que es incorrecta ?

Jennifer Yanez Jiménez

student•

Para modificar texto de un elemento HTML se usa innerText o textContentasignándoles un valor directamente. La diferencia es que con innerText podemos incluir etiquetas HTML, mientras textContent no las interpreta, las muestra como texto plano.

Carlos Aponte

student•

Diferencias entre textContent, innerText e innerHTML:

1. textContent

Qué hace: Devuelve o establece todo el texto dentro de un elemento, incluyendo el texto oculto (como el que está dentro de elementos con display: none).
Ejemplo:<div id="ejemplo">Hola <span style="display:none">Mundo</span></div> console.log(document.getElementById('ejemplo').textContent); // "Hola Mundo"

2. innerText

Qué hace: Devuelve o establece solo el texto visible en la pantalla. Ignora el texto oculto (como el de elementos con display: none).
Ejemplo:<div id="ejemplo">Hola <span style="display:none">Mundo</span></div> console.log(document.getElementById('ejemplo').innerText); // "Hola"

3. innerHTML

Qué hace: Devuelve o establece todo el contenido HTML dentro de un elemento, incluyendo etiquetas y texto.
Ejemplo:<div id="ejemplo">Hola <span>Mundo</span></div> console.log(document.getElementById('ejemplo').innerHTML); // "Hola <span>Mundo</span>"

Resumen:

textContent: Todo el texto (visible y oculto).
innerText: Solo el texto visible.
innerHTML: Todo el contenido, incluyendo etiquetas HTML.

Carlos Andres Arteaga escobar

student•

const title = document.getElementById("title"); // este sirve para clases y id es mejor */ const title = document.querySelector("#title"); // este no sirve para las clases si no para id title.innerText = " este es otro texto ";

Orlando Alonso Gonzales Paz

student•

Les comparto mis apuntes

// Obtenemos el elemento del DOM con el id "app-title" usando querySelector y lo almacenamos en la variable 'titulo'
const titulo = document.querySelector("#app-title");

// Mostramos todas las propiedades y métodos del elemento 'titulo' en la consola usando 'console.dir()'
console.dir(titulo);

// Modificamos el texto dentro del elemento 'titulo' usando 'textContent' y lo cambiamos a "Nuevo Titulo"
// 'textContent' establece o devuelve el contenido textual de un nodo, incluyendo el contenido de sus hijos
console.dir(titulo.textContent = "Nuevo Tituto");

// Usamos 'innerText' para cambiar el contenido textual a "Este es otro titulo"
// 'innerText' solo devuelve o establece el contenido visible del elemento, sin incluir los nodos ocultos o con CSS 'display: none'
titulo.innerText = "Este es otro titulo";

Calvin Rafael Bobadilla Fernandez

student•

De manera general, el mas usado es textContent, sin embargo, si queremos insertar imagenes o codigo html directo, usamos innerHtml.

innerText es como textContent pero tiene en cuenta si el contenido es visible o no, si es visible lo edita, si no, no.

Daniel Andres Rojas Paredes

student•

teniendo en cuenta la sincronizacion entre atributos y propiedades,¿ no es mas recomendable hacer los cambios en el html cambiando los atributos directamente y no las propiedades? que ventajas representa hacerlo con querySelector y no con getelement?

Rodrigo Aguilar

student•

No sé si el mencionó en las primeras clases que getElemenById es más rápido.

// Obtenemos el elemento del DOM con el id "app-title" usando querySelector y lo almacenamos en la variable 'titulo'
const titulo = document.querySelector("#app-title");

// Mostramos todas las propiedades y métodos del elemento 'titulo' en la consola usando 'console.dir()'
console.dir(titulo);

// Modificamos el texto dentro del elemento 'titulo' usando 'textContent' y lo cambiamos a "Nuevo Titulo"
// 'textContent' establece o devuelve el contenido textual de un nodo, incluyendo el contenido de sus hijos
console.dir(titulo.textContent = "Nuevo Tituto");

// Usamos 'innerText' para cambiar el contenido textual a "Este es otro titulo"
// 'innerText' solo devuelve o establece el contenido visible del elemento, sin incluir los nodos ocultos o con CSS 'display: none'
titulo.innerText = "Este es otro titulo";

Modificar texto en HTML con JavaScript

Entendiendo el DOM

Manipulación del DOM con JavaScript y APIs

Entendiendo el DOM y su Manipulación con JavaScript

Diferencias entre el DOM y el objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Navegación Jerárquica del DOM en JavaScript

Manipulando Elementos del DOM

Atributos y Propiedades en HTML y su Manipulación con JavaScript