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>© 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">
<span>Adiós a todos</span>
</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.
<span>Adiós a todos</span>
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
.