innerHTML
es una propiedad de los elementos HTML
en este caso se refiere a cualquier texto enriquecido que se encuentre dentro de ese elemento, ademas de HTML
interpretable o procesable.
por ejemplo:
<div>
<nav>Menu</nav> <!-- Este seria el texto enriquecido --->
</div>
Por naturaleza aunque un elemento contenga en si definido otras etiquetas HTML
junto con texto su propiedad innerHTML
siempre se encontrara vacia, a no ser de que nosotros la modifiquemos.
Ahora bien, si tu modificas el innerHTML
de un elemento lo que estas haciendo es sobreescribir el cuerpo de ese elemento con lo que tu le pusiste al innerHTML
, por lo tanto, es como reemplazar todo aquello que se encuentre dentro de esa etiqueta por lo que tu le indiques:
const miContenedor = document.getElementById("miContenedor");
miContenedor.innerHTML = "";
<div id = "miContenedor">
<p>Hola mundo!</p>
</div>
Como vemos al asignarle algo a la propiedad innerHTML
de nuestro div el cuerpo desaparece, debido a lo que hemos explicado antes.
Pero entonces como hacemos que se conserve el cuerpo para anadir lo que necesitemos?
Muy facil simplemente en vez de utilizar una asignacion: =
.
Deberas usar una concatenacion: +=
De esta manera se conserva lo que ya contenia de por si la etiqueta en su cuerpo y se le añade al final lo que tu definiste, veamos un ejemplo:
const miContenedor = document.getElementById("miContenedor");
miContenedor.innerHTML += "<h1>Esta etiqueta fue anadida por medio de innerHTML!</h1>";
<div id = "miContenedor">
<p>Hola mundo!</p>
</div>
Como vemos el cuerpo se conserva y se añade el elemento o elementos indicados a manera de HTML que es el efecto deseado.
Recordemos que concatenacion significa anadirle a algo que ya existe un elemento o varios, por ejemplo a un string
le podemos concatenar otro string
fusionando ambos en uno solo sin que se pierda la informacion de uno u otro.
Basicamente la asignacion estaba borrando el contenido del elemento, pero con una concatenacion rescatamos ese contenido y le pegamos el que necesitamos.