Actualice el contenido de texto de un elemento DOM en JavaScript

En el último artículo, analizamos cómo actualizar el marcado HTML de un elemento DOM en JavaScript estándar. En este breve tutorial, aprenderá cómo obtener y configurar el texto de un elemento.

JavaScript proporciona dos propiedades, innerText y textContent , para obtener y establecer el contenido de texto de un elemento HTML y todos sus nodos secundarios.

Si establece un nuevo valor de innerText o textContent , todos los nodos secundarios se eliminarán y reemplazarán con un solo nodo de texto que contenga la cadena especificada.

Digamos que tenemos el siguiente <p> elemento:

<p id="intro">My name is <b>John Doe</b>!</p>

El siguiente ejemplo muestra cómo obtener el contenido de texto del elemento anterior:

// grab element
const elem = document.querySelector('#intro');

// get text content
console.log(elem.innerText);
// OR
console.log(elem.textContent);

// My name is John Doe!

Para reemplazar el contenido de texto existente completamente, simplemente establezca un nuevo valor para innerText :

// replace existing text
elem.innerText = 'Hey there! I am Atta';

El innerText La propiedad es muy similar a textContent propiedad. Sin embargo, existen ciertas diferencias:

  • innerText devuelve el contenido del texto todos los elementos excepto <script> y <style> elementos, mientras que textContent devuelve el contenido de texto de todos elementos.
  • innerText puede no ser usado para obtener contenido de texto de elementos que están ocultos con CSS, pero textContent se puede usar.

Leer a continuación: Cómo crear un elemento DOM usando JavaScript