Bien, estoy creando este sitio y quiero que cada página tenga una barra de navegación, ¿cómo hago para que en lugar de tener que escribir el html para la barra de navegación en cada página, simplemente escriba en el archivo .js y agregue este archivo javascript a cada página.
Por cierto, no estoy preguntando cómo escribir una barra de navegación en html, ya lo hice.
Puede usar .insertAdjacentHTML y pasar 'afterbegin' como el "dónde" para agregar el html . En este ejemplo, se agrega como el primer elemento del cuerpo.
const header= "<div>This is my nav</div>" document.querySelector("body").insertAdjacentHTML("afterbegin", header); <body> <div> Content of page <div> </body>Edite para agregar enlaces, puede hacer algo como:
<a> a cada enlace de su navegaciónwindow.location.pathname[href='${path}'] (donde la ruta es el nombre de la ruta)active ) para reflejar la página actual NOTA: el nombre de ruta de la ventana actual (ventana de fragmento de stackoverflow) es /js , por lo que para este ejemplo lo usé como el href del segundo enlace de navegación.
NOTA TAMBIÉN: asumo que todos sus archivos html están en el mismo directorio
//get the pathname from the current url const path = window.location.pathname const header= ` <ul class="nav"> <li><a href="/home">Home</a></li> <li><a href="/js">Javascript</a></li> </ul>` document.querySelector("body").insertAdjacentHTML("afterbegin", header); //add the active class to the anchor tag with the href === path document.querySelector(`[href='${path}']`).classList.add('active') .nav li{ display: inline-block; } .nav a{ text-decoration: none; color: black; } .nav .active{ text-decoration: underline; color: grey; } <body> <div> Content of page <div> </body>Para eso, recomendaría que use una biblioteca de interfaz de usuario como React, que cuando se combina con React Router definitivamente le brindará un código mucho más limpio y una mejor experiencia de desarrollo en general.
Con eso en mente, sé que hay una curva de aprendizaje significativa para dominar nuevas bibliotecas/marcos, por lo que una forma de hacerlo usando HTML, CSS y JS estándar es pegando el código HTML para el encabezado en una variable e inyectándolo. usando algunos métodos DOM como .append o .insertAdjecentHTML en un elemento seleccionado (div, encabezado, cuerpo...).
Si su sitio contendrá principalmente contenido estático, le sugiero que busque un generador de sitios estáticos (SSG) como Jekyll, Hugo o Gatsby. Cuando comencé con el desarrollo web, usé Jekyll y era muy amigable para principiantes. Luego, puede vincular desde su barra de navegación a sus otras páginas normalmente.