Hace un par de semanas, estaba trabajando en algo y tuve uno de esos '¡Ajá!' momentos en los que algo tenía un sentido tan profundo que me dije a mí mismo que debía explorarlo y escribir sobre ello.

Desafortunadamente, no recuerdo en qué estaba trabajando o en qué ese '¡Ajá!' el momento fue exactamente. Entonces, voy a sumergirme y ver si puedo redescubrirlo.

innerText

En JavaScript vanilla, innerText toma solo el texto renderizado de un elemento HTML. En esencia, el texto que está visible en el navegador es lo que atrapa innerText.

HTML

<p id=“example”>This is an <span> example </span>.</p>

JavaScript

var x = document.getElementById(“example”).innerText;

Algunas cosas para tener en mente:

• si los elementos están ocultos con CSS (usando algo como las propiedades de 'visualización' o 'visibilidad') innerText no puede acceder a ellos
• innerText NO devolverá el contenido de los elementos <script> o <style>

Esto realmente obtendrá o establecerá el contenido interno de un elemento HTML.

Cuando recupera el contenido interno, también incluirá cualquier espacio y etiquetas de elementos internos como <li> o <span>, etc.

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).innerHTML;

Para cambiar el contenido de un elemento HTML:

document.getElementById(“example”).innerHTML = “And <strong> NOW </strong> the contents have been changed!”;

*** Debido a que innerHTML se puede usar para cambiar el contenido de una página, es posible que se ejecuten etiquetas <script> peligrosas y otros ataques de JavaScript. ***

*** Por lo tanto, no se recomienda utilizar innerHTML. ***

En su lugar, intente utilizar textContent.

contenido del texto

Esto devolverá el contenido del texto con espaciado (similar a innerHTML), pero sin etiquetas de elementos internos.

Para recuperar el textoContenido:

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).textContent;

Para configurar el textContent, hazlo como en el ejemplo innerHTML anterior.

document.getElementById(“example”).textContent = “And <strong> NOW </strong> the contents have been changed!”;

• devolverá el contenido de texto de todos los elementos, incluidos <script> y <style>
• devolverá el texto de los elementos ocultos con CSS