Javascript: ¿Cuál es la diferencia entre textContent, innerText y innerHtml?

Si eres un desarrollador web, es probable que hayas utilizado o al menos oído hablar de JavaScript, uno de los lenguajes de programación más populares para la creación de sitios web interactivos y dinámicos. Cuando se trata de manipular el contenido de una página web, JavaScript ofrece varias opciones, como textContent, innerText y innerHtml. A primera vista, pueden parecer similares, pero en realidad tienen diferencias importantes en su funcionamiento y cómo afectan al contenido de la página. En este artículo, vamos a explorar estas diferencias y entender cuándo y cómo usar cada uno de ellos.

textContent: La propiedad textContent en JavaScript se refiere al contenido de texto puro de un elemento HTML. Esto significa que solo obtendrá o establecerá el texto sin etiquetas HTML ni ningún formato adicional. Por ejemplo, si tienes un elemento de párrafo <p> con el siguiente código HTML:

<p id="miParrafo">Esto es un párrafo <strong>con texto en negrita</strong> y <em>texto en cursiva</em></p>

Y quieres acceder al contenido de texto del párrafo usando textContent en JavaScript, el resultado sería:

const miParrafo = document.getElementById('miParrafo');
console.log(miParrafo.textContent);
// Salida: "Esto es un párrafo con texto en negrita y texto en cursiva"

Como puedes ver, textContent devuelve el contenido de texto completo dentro del elemento, incluyendo cualquier etiqueta HTML.

innerText: La propiedad innerText en JavaScript también se refiere al contenido de texto de un elemento HTML, pero con algunas diferencias importantes en comparación con textContent. innerText tiene en cuenta la visualización del elemento en la página y aplica estilos CSS, lo que significa que solo obtendrás el texto visible para el usuario. Por ejemplo, si tienes un elemento de párrafo <p> con el siguiente código HTML:

<p id="miParrafo">Esto es un párrafo <strong style="display:none;">oculto</strong> y <em>texto en cursiva</em></p>

Y quieres acceder al contenido de texto del párrafo usando innerText en JavaScript, el resultado sería:

const miParrafo = document.getElementById('miParrafo');
console.log(miParrafo.innerText);
// Salida: "Esto es un párrafo y texto en cursiva"

Como puedes ver, innerText no incluye el texto oculto por estilos CSS, como el texto dentro del elemento <strong> con el estilo “display:none;” en este caso.

innerHTML: La propiedad innerHTML en JavaScript se refiere al contenido HTML completo de un elemento, incluyendo tanto el texto como las etiquetas HTML dentro del elemento. Por ejemplo, si tienes el mismo elemento de párrafo <p> del ejemplo anterior y quieres acceder a su contenido HTML usando innerHTML en JavaScript, el resultado sería:

const miParrafo = document.getElementById('miParrafo');
console.log(miParrafo.innerHTML);
// Salida: "Esto es un párrafo <strong style="display:none;">oculto</strong> y <em>texto en cursiva</em>"

Como puedes ver, innerHTML devuelve todo el contenido HTML del elemento.

Conclusión: textContent, innerText y innerHTML son propiedades en JavaScript que se utilizan para acceder y manipular el contenido de un elemento HTML en una página web. Cada una tiene su propio comportamiento y propósito.

textContent devuelve el contenido de texto puro del elemento, sin tener en cuenta ninguna etiqueta HTML o estilo CSS. Es útil cuando solo se necesita el texto sin ningún formato adicional.

innerText, por otro lado, tiene en cuenta la visualización del elemento en la página y aplica estilos CSS. Devuelve solo el texto visible para el usuario, excluyendo cualquier texto oculto por estilos CSS. Es útil cuando se necesita el texto visible para el usuario en la página.

Por último, innerHTML devuelve el contenido HTML completo del elemento, incluyendo tanto el texto como las etiquetas HTML dentro del elemento. Es útil cuando se necesita acceder o modificar el contenido HTML del elemento, incluyendo su estructura y estilo.

Es importante tener en cuenta que innerText e innerHTML pueden tener implicaciones de seguridad, ya que permiten la manipulación de contenido HTML y pueden abrir la puerta a posibles ataques de XSS (Cross-Site Scripting) si no se manejan correctamente.

En general, es importante comprender las diferencias entre textContent, innerText y innerHTML y elegir el adecuado en función de los requisitos de tu proyecto y las necesidades de seguridad. Cada uno tiene su lugar y uso en la manipulación del contenido en JavaScript, y un buen conocimiento de estas propiedades te ayudará a trabajar de manera eficiente y segura en tus proyectos web.