En este capítulo vamos a ver como interactuar tanto con el contenido textual como con el contenido HTML de un selector o de una etiqueta HTML.
Existen varias propiedades para modificar el contenido de un texto y reemplazarlo por otro.
innerText
Es un propiedad que en su momento se creó para Internet Explorer, pero no es una propiedad estándar. Veamos un ejm.
<h1>Texto y HTML</h1>
<p id="que-es">Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Enim magnam quos ipsa magni recusandae
veritatis dolores veniam eaque vel, iure temporibus
explicabo! Beatae nihil odit deserunt velit mollitia nostrum placeat!</p>
<script>
const $whatIsDOM = document.getElementById("que-es");
let text = "Hola que tal, como estás.";
$whatIsDOM.innerText = text;
</script>innerText sustituye el texto del párrafo por el de la variable text. Pero importante, innerText no reconoce las etiquetas HTML que le pasemos como parámetro.
textContent
La propiedad que forma parte del estándar para agregar contenido textual es textContent, donde pasa lo mismo que con innerText, no se reconocen las etiquetas HTML pasadas como parámetros, no las interpreta.
innerHTML
Lo que hace es reemplazar lo que tenga ese contenido por lo que se pase como parámetro, y esta propiedad SÍ reconoce las etiquetas HTML.
Ejm
<h1>Texto y HTML</h1>
<p id="que-es">Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Enim magnam quos ipsa magni recusandae
veritatis dolores veniam eaque vel, iure temporibus
explicabo! Beatae nihil odit deserunt velit mollitia nostrum placeat!</p>
<script>
$whatIsDOM = document.getElementById("que-es");
let text = `
<p>Hola que tal, como estás</p>
<p>Mi nombre es Francisco</p>
<p>Y estamos aprendiendo <b>Javascript</b></p>
`;
$whatIsDOM.innerText = text;
$whatIsDOM.textContent = text;
$whatIsDOM.innerHTML = text;
</script>Cuando usar innerHTML y cuando usar textContent
Cuando necesitemos insertar solo texto, utilizar textContent, mientras que cuando necesitemos insertar texto y código HTML, utilizar innerHTML.
outerHTML
Mientras que innerHTML reemplaza el contenido HTML del elemento del DOM del cual la hemos activado, outerHTML reemplaza este elemento del DOM por el contenido que tengamos a sustituir.
$whatIsDOM.outerHTML = text;
Resumen
Para sustituir un texto y por otro tenemos 4 métodos:
- innertext (depreciado)
- textContent
- innerHTML
- outerHTML