¿Sabes que hace innerhtml o para que sirve innerhtml?
La clase Element es un objeto fundamental en la utilización del Document Object Model, también conocido como el DOM, porque es de esta clase de la que se despliegan todas las etiquetas HTML que componen el árbol jerárquico. En este post, te enseñaremos qué es y cómo funciona la propiedad innerhtml que es una de las propiedades de la clase Element con la que podemos modificar los elementos del DOM.
¿Qué es la propiedad innerHTML?
Como puedes leer en nuestro post sobre la clase Element del DOM, esta tiene una serie de propiedades y elementos que podemos utilizar para todas las etiquetas HTML, pues todas son instancias de esta clase. La propiedad innerHTML es una de estas propiedades comunes que podemos utilizar para modificar cualquier instancia de Element.
La propiedad innerHTML, también conocida como element.innerHTML o nodo.innerHTML, recibe el código HTML que el nodo tiene que renderizar. Es decir, es otra manera de crear y ubicar elementos dentro del DOM. Otra de las maneras es, como hemos visto en nuestro post sobre crear un elemento img en el DOM, usar el método document.createElement, llenar el elemento creado con un contenido y luego ubicarlo en el DOM.
Para mostrarte cómo funciona la propiedad innerHTML exactamente usaremos un código de ejemplo. Supongamos que hemos creado elementos en el DOM que hemos llamado imageElement y p1Element. Es decir, en el momento, nuestro código se ve de la siguiente manera:
<body>
<main></main>
<script>
const p1Element = document.createElement («p»);
p1Element.textContent = «párrafo nuevo!»;
const imageElement = document.createElement (‘img’);
imageElement.src = ‘https://…’
const mainElement = document.querySelector (‘main’);
mainElement.appendChild(p1Element);
mainElement.appendChild(imageElement);
</script>
</body>
Recuerda que, a pesar de que el elemento main aparezca vacío, el código JavaScript dentro de la etiqueta script está creando nuevos elementos y ubicándolos dentro de main usando appendChild.
A continuación, te enseñaremos cómo reemplazar las anteriores líneas de código y crear un nuevo elemento en el DOM usando la propiedad innerHTML.
¿Cómo funciona la propiedad innerHTML?
La propiedad innerHTML funciona a partir de la identificación de un nodo particular y el paso de un nuevo código HTML. Entonces, podemos utilizar la variable mainElement que hemos declarado antes para identificar el nodo main de nuestro proyecto de ejemplo.
mainElement.innerHTML = » «
Luego, podemos igualar esta propiedad con el código HTML puro que queramos que el nodo renderice. Ten presente que esto hará que el código HTML que teníamos previamente dentro de main se destruya y se reemplace por el nuevo código que hemos insertado.
mainElement.innerHTML = «<p>soy un párrafo destructor</p>»
Al ejecutar la línea de código anterior, notarás que en tu navegador solo aparece este texto del párrafo destructor. Todo lo demás se ha eliminado del código dentro de main. Es decir, el elemento imageElement y el p1Element que habíamos creado anteriormente ya no aparecen, pues han sido sustituidos por el nuevo elemento p.
En este orden de ideas, no se tienen en cuenta todas las líneas de código que hemos escrito antes del innerHTML, pues aunque estén dentro de nuestro proyecto no se ven en el resultado final. Puedes comprobar esta lógica al comentar la línea de innerHTML y ver cómo ahora reaparecen los elementos anteriores.
Si quieres aprender más sobre la propiedad innerHTML de la clase element del DOM, te recomendamos leer el artículo element.innerHTML en la página oficial de la Mozilla Developer Network.
¿Quieres seguir aprendiendo?
Tras leer este post, sabes exactamente qué es la propiedad innerHTML y cómo funciona. Sin embargo, todavía queda mucho por aprender del mundo del desarrollo web antes de ser un experto. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a dominar lenguajes como JavaScript (backend y frontend) HTML, CSS y JSX. ¡Pide información para descubrir cómo cambiar tu futuro!
