Diferencia entre innerHTML, outerHTML, innerText y outerText en Javascript

Las siguientes propiedades son usadas para obtener el contenido de un determinado elemento HTML, y también, son usadas para asignar o actualizar el contenido de los mismos. Veamos cada una de ellas.

innerHTML

Esta propiedad te permite obtener o establecer el contenido HTML interno, ojo, interno, de un elemento.

Tenemos el siguiente HTML

<div class="mi-contenedor">
    <h1>Hola a todos</h1>
</div>
Lenguaje del código: HTML, XML (xml)

Seleccionamos a «.mi-contenedor» y asignamos contenido a través de innerHTML

const contenedor = document.querySelector('.mi-contenedor');
contenedor.innerHTML = '<span>Adiós a todos</span>';Lenguaje del código: JavaScript (javascript)

Y el HTML se actualiza a:

<div class="mi-contenedor">
    <span>Adiós a todos</span>
</div>
Lenguaje del código: HTML, XML (xml)

Como puedes apreciar, el contenido interno es el que se actualiza.

outerHTML

A diferencia del anterior, esta propiedad no solo agarra el contenido interior, también incluye al mismo elemento seleccionado.

Tenemos el siguiente HTML

<div class="mi-contenedor">
    <h1>Hola a todos</h1>
</div>Lenguaje del código: HTML, XML (xml)

Seleccionamos a «.mi-contenedor» y asignamos contenido a través de outerHTML.

const contenedor = document.querySelector('.mi-contenedor');
contenedor.outerHTML = '<span>Adiós a todos</span>';Lenguaje del código: JavaScript (javascript)

Y el HTML se actualiza a:

<span>Adiós a todos</span>Lenguaje del código: HTML, XML (xml)

Como puedes ver, el outerHTML incluye al contenedor, no solo al contenido. Entonces, al asignarle el nuevo valor, cambia todo el elemento.

innerText

Cuando se accede a innerText, solo se recupera el texto visible dentro del elemento, excluyendo las etiquetas HTML y su contenido. Sin embargo, al asignar un valor a innerText, se produce una modificación directa del contenido del elemento, sustituyendo todo su contenido, incluyendo cualquier HTML interno que pueda existir: etiquetas, entidades, etc.

Para esta propiedad haré 2 ejemplos para tenerlo más claro. Uno de recuperar contenido y otro de asignar contenido.

Ejemplo 1: Recuperar contenido con innerText

Tenemos el siguiente HTML

<div class="mi-contenedor">
    <h1>&copy; Copyright <span>2019</span></h1>
</div>Lenguaje del código: HTML, XML (xml)

Seleccionamos «.mi-contenedor» y vemos el texto interior a través de innerText

const contenedor = document.querySelector('.mi-contenedor');
console.log(contenedor.innerText);Lenguaje del código: JavaScript (javascript)

La salida en consola será:

© Copyright 2019

Ejemplo 2: Asignar contenido a través de innerText

Tenemos el siguiente HTML

<div class="mi-contenedor">
    <h1>Hola a todos</h1>
</div>
Lenguaje del código: HTML, XML (xml)

Seleccionamos a «.mi-contenedor» y asignamos contenido a través de innerText.

const contenedor = document.querySelector('.mi-contenedor');
contenedor.innerText = '<span>Adiós a todos</span>';Lenguaje del código: JavaScript (javascript)

Esta propiedad espera texto, así que si le metes HTML (lo hago para ver todas las posibilidades), no lo procesará como HTML, y verás el texto con las etiquetas en el navegador.

<span>Adiós a todos</span>Lenguaje del código: Bash (bash)

Y el HTML se actualiza a lo siguiente.

<div class="mi-contenedor">
  &lt;span&gt;Adiós a todos&lt;/span&gt;
</div>
Lenguaje del código: HTML, XML (xml)

Si amigo/a, aquí lo complique un poco, pero al final es similar al innerHTML, cambia el interior de un elemento, solo que aquí trabaja con texto.

Los textos dentro de un elemento están combinados con etiquetas y otros detalles de HTML, por este motivo hice ejemplos con estos escenarios.

outerText

Tiene el mismo concepto del innerText, lo único que cambia aquí es el alcance. A diferencia del anterior, esta propiedad no solo agarra el contenido interior, también incluye al mismo elemento seleccionado.

Tenemos el siguiente HTML

<div class="mi-contenedor">
    <h1>Hola a todos</h1>
</div>Lenguaje del código: HTML, XML (xml)

Seleccionamos a «.mi-contenedor» y asignamos contenido a través de outerText.

const contenedor = document.querySelector('.mi-contenedor');
contenedor.outerText = '<span>Adiós a todos</span>';Lenguaje del código: JavaScript (javascript)

El HTML se actualizaría a lo siguiente.

&lt;span&gt;Adiós a todos&lt;/span&gt;Lenguaje del código: HTML, XML (xml)

Como outerText incluye tanto contenido como el elemento que lo contiene, al asignarle la cadena de texto, se reemplaza todo a solo la cadena de texto.

¿Cuando usar cada uno?

En el innerText y outerText jugamos un poco para ver como se comporta con el HTML, pero usarás estas propiedades cuando necesitas recuperar o asignar texto en un determinado elemento HTML.

En caso de que quieras agregar o recuperar elementos HTML usa innerHTML y outerHTML.

Compartir:
Suscríbete para recibir artículos de desarrollo web

En este boletín envío correos relacionados al área del diseño y desarrollo web. Escribo sobre WordPress y AstroJS, a veces un poco de UX/UI.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Crear botones para compartir en redes sociales con HTML

Cómo hacer texto degradado con CSS

Agregar fuentes personalizadas en CSS con @font-face