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>
Code language: 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>';Code language: JavaScript (javascript)

Y el HTML se actualiza a:

<div class="mi-contenedor">
    <span>Adiós a todos</span>
</div>
Code language: 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>Code language: 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>';Code language: JavaScript (javascript)

Y el HTML se actualiza a:

<span>Adiós a todos</span>Code language: 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>Code language: 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);Code language: 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>
Code language: 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>';Code language: 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>Code language: 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>
Code language: 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>Code language: 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>';Code language: JavaScript (javascript)

El HTML se actualizaría a lo siguiente.

<span>Adiós a todos</span>Code language: 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.