¿Cómo cambio el contenido del marcador de posición con javascript?
Tengo un sitio web con varias páginas .html y, para facilitar la edición, estoy usando dos marcadores de posición en cada página: uno con la barra de navegación y otro con el esqueleto principal del contenido, así:
<body> <div id="nav-placeholder"> </div> <div id="content-placeholder"> </div> </body>La barra de navegación y el contenido están en archivos separados y se cargan en las páginas con un archivo javascript externo como este:
$(function(){ $("#nav-placeholder").load("nav.html"); }); $(function(){ $("#content-placeholder").load("content.html"); }); Hasta ahora, todo funciona bien. Ahora, estoy tratando de modificar el contenido por separado para cada página (con JS), pero no estoy seguro de cómo hacerlo o si eso es posible. Parte de content.html es, por ejemplo, `
<h2 id="subheader1">Title</h2> Estoy tratando de cambiar el contenido #subheader1 en el archivo javascript así:
$(function(){ $("#nav-placeholder").load("nav.html"); }); $(function(){ $("#content-placeholder").load("content.html"); }); $(document).ready(function() { document.getElementById("subheader1").outerHTML = "test" ; });pero eso no funciona (esto está dirigido a todas las páginas, pero todavía no funciona). ¿Probablemente porque solo ve el marcador de posición DIV en index.html y no es contenido?
Intenté colocar el subheader1 div en index.html para probar, y luego funcionó, pero eso quitaría la eficiencia del marcador de posición.
¿Hay alguna forma de hacer esto (u otra forma de ser más eficiente con páginas con el mismo diseño (DIV) pero texto diferente?)
¡Gracias!
El método de load no es síncrono, por lo que
$(document).ready(function() { document.getElementById("subheader1").outerHTML = "test" ; });se ejecuta antes de que se cargue el html en la página.
El documento sugiere usar una función de devolución de llamada.
se ejecuta después de que se haya realizado el procesamiento posterior y la inserción de HTML
Tuve éxito al usar esto en mi archivo js:
$(document).ready(function() { $(function(){ $("#nav-placeholder").load("./nav.html", function() { document.getElementById("insideNav").outerHTML = "It works !" ; }); }); }); con <h2 id="insideNav">Original Nav Bar</h2> en mi nav.html .