Diferencia entre innerHTML, outerHTML, innerText y outerText en Javascript

Las siguientes propiedades sirven para seleccionar y/o reemplazar un elemento HTML o su contenido.

Selecciona elementos internos

Las propiedades innerHTML y innerText sirven para seleccionar o reemplazar el CONTENIDO INTERNO de un elemento HTML seleccionado.

innerHTML

Con esta propiedad puedes seleccionar o asignar contenido HTML a un elemento. Por ejemplo, tenemos lo siguiente:

<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.

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)

Selecciona todo el elemento

A diferencia de las propiedades anteriores. Las propiedades outerHTML y outerText, no solo seleccionan los hijos sino también al elemento que las contiene.

outerHTML

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)

Todo el HTML anterior se reemplaza por:

<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 HTML, cambia todo el elemento.

outerText

Tiene el mismo concepto del innerText, lo único que cambia aquí es el alcance. 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)

Todo el HTML anterior se reemplazaría por una cadena de texto:

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

Consideraciones de seguridad

Si solo vas a seleccionar o agregar texto no uses innerHTML y outerHTML, ya que estas propiedades permiten agregar HTML, eso quiere decir que pueden agregar Javascript dentro de HTML, y modificar el comportamiento de tu web.

Te recomiento investigar sobre Cross-site scripting.