0

Tengo esta función en mi .js:

function mandarTeatro(){
    document.getElementById("mainPage").innerHTML = "<p>Esta es la sección teatral</p>";
}

Y la cuestión es que, cuando la mando llamar mediante un "onclick", escribe eso en una de mi html principal, peor el punto es que, inmediatamente que lo escribe, me regresa a como estaba inicialmente, ¿por qué está pasando eso?

Aquí el html, si lo posteaba aquí no me iba a dejar: https://pastebin.com/JPHbmDw7

1 respuesta 1

1

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.

7
  • function mandarTeatro(){ const secccionPrincipal = document.getElementById("mainPage"); secccionPrincipal.innerHTML += "<p>Esta es la sección teatral</p>"; } pero me sigue haciendo lo mismo, me manda bien el código html pero me lo reescribe igual, editaré en el post principal el código de la página html, a lo mejor es algo de ahí.
    – shiosaku
    Commented el 16 sept. 2020 a las 22:45
  • A que te refieres con "Me lo reescribe igual"?, que deseas hacer realmente?
    – Layer
    Commented el 17 sept. 2020 a las 0:05
  • Me refiero a que, con el "+=" me hace el mismo efecto que son simplemente el "=", me lo muestra un segundo, luego de inmediato lo borra
    – shiosaku
    Commented el 17 sept. 2020 a las 0:37
  • @shiosaku creo que hay algo en el codigo que te borra los elementos, seguramente otro innerHTML que tienes por ahi que no estas tomando en cuenta, ya que por defecto esto deberia funcionar, debes mirar bien en el codigo si hay algo mas que interactua con ese elemento.
    – Layer
    Commented el 17 sept. 2020 a las 3:18
  • pero no tengo ningún otro script activo, solo ese, y en realidad solo son esas 3 líneas de código del script
    – shiosaku
    Commented el 17 sept. 2020 a las 3:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.