javascript – How to include HTML in other HTML?

Question:

I have a menu for my web page, the problem is that if I plan to change it I will have to modify many files (around 40) I thought then to include the file using JavaScript with the document.write () function but I don't know how to add the HTML

MENU.html

<div id="menu">
      <ul class="nav">
        <li><a href=""><font size="18">Street Level</font></a>
        <li>
          <a href="">Introduccion</a>
          <ul>
            <li><a href="#">Presentacion</a>
            </li>
            <li><a href="#">El evangelio</a>
            </li>
            <li><a href="#">El evangelio del Hip Hop</a>
            </li>
            <li>
              <a href="#">Herramientas</a>
              <ul>
                <li>
                  <a href="#">Motivacionales</a>
                  <ul>
                    <li><a href="#">Retos del dia</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Desenvolvimiento</a>
                  <ul>
                    <li><a href="#">Freestyle</a>
                    </li>
                    <li><a href="#">Batallas</a>
                    </li>
                    <li><a href="#">Gozatelo</a>
                    </li>
                    <li><a href="#">A Oscuras</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Creatividad</a>
                  <ul>
                    <li><a href="#">Cuadrado</a>
                    </li>
                    <li><a href="#">Reloj</a>
                    </li>
                    <li><a href="#">3x3</a>
                    </li>
                    <li><a href="#">8x2</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="">Hip Hop</a>
          <ul>
            <li><a href="#">Historia</a>
            </li>
            <li><a href="#">Dios: El Creador del Hip Hop</a>
            </li>
            <li>
              <a href="#">Los Cinco Elementos</a>
              <ul>
                <li><a href="#">Introduccion</a>
                </li>
                <li><a href="#">Breaking</a>
                </li>
                <li><a href="#">Mcing</a>
                </li>
                <li><a href="#">Djing</a>
                </li>
                <li><a href="#">Graffiti</a>
                </li>
              </ul>
            </li>
          </ul>
        <li>
          <a href="">Breakdance</a>
          <ul>
            <li><a href="#">Historia</a>
            </li>
            <li><a href="#">Filosofia</a>
            </li>
            <li><a href="#">Bboy - Bgirl</a>
            </li>
            <li>
              <a href="#">Breakbeat</a>
              <ul>
                <li><a href="#">"Break" the beat</a>
                </li>
                <li><a href="#">Ritmo</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Batallas</a>
              <ul>
                <li><a href="#">Respeto</a>
                </li>
                <li><a href="#">Señalar</a>
                </li>
                <li><a href="#">Copia-Originalidad</a>
                </li>
              </ul>
            </li>
            </li>
          </ul>
        <li>
          <a href="">Foundation</a>
          <ul>
            <li><a href="#">La casa construida sobre arena</a>
            </li>
            <li><a href="#">El hombre trinario</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">La Persona</a>
          <ul>
            <li><a href="#">Objetivos Personales</a>
            </li>
            <li><a href="#">Breakdance: Estilo de vida</a>
            </li>
            <li><a href="#">Actitud</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">El Cuerpo</a>
          <ul>
            <li><a href="#">A repetir!</a>
            </li>
            <li>
              <a href="#">Movimientos Basicos</a>
              <ul>
                <li><a href="#">Tecnica</a>
                </li>
                <li><a href="#">TopRock</a>
                </li>
                <li><a href="#">UpRock</a>
                </li>
                <li><a href="#">Go Down</a>
                </li>
                <li><a href="#">Footwork</a>
                </li>
                <li><a href="#">Freeze</a>
                </li>
                <li><a href="#">Powermove</a>
                </li>
              </ul>
            </li>
            </li>
            </li>
            <li>
              <a href="#">Preparacion Fisica</a>
              <ul>
                <li><a href="#">Fuerza</a>
                </li>
                <li><a href="#">Velocidad</a>
                </li>
                <li><a href="#">Resistencia</a>
                </li>
                <li><a href="#">Flexibilidad</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">CREARtividad</a>
              <ul>
                <li><a href="#">Combos</a>
                </li>
                <li><a href="#">Velocidad</a>
                </li>
                <li><a href="#">Entrada-Salida</a>
                </li>
                <li>
                  <a href="#">Triangulo Dinamico</a>
                  <ul>
                    <li><a href="#">Niveles</a>
                    </li>
                    <li><a href="#">Velocidad</a>
                    </li>
                    <li><a href="#">Espacio</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">EXPRESSividad</a>
              <ul>
                <li><a href="#">Fluidez</a>
                </li>
                <li><a href="#">Emociones</a>
                </li>
                <li><a href="#">Lenguajes</a>
                </li>
                <li><a href="#">Tonalidades</a>
                </li>
              </ul>
            </li>
          </ul>
        <li>
          <a href="">La Mente</a>
          <ul>
            <li><a href="#">A pensar!</a>
            </li>
            <li><a href="#">Breaking Goal</a>
            </li>
            <li><a href="#">The Magnet Method</a>
            </li>
          </ul>
        <li>
          <a href="#">El Alma</a>
          <ul>
            <li><a href="#">Ya no pienses!</a>
            </li>
            <li><a href="#">Modelos a seguir</a>
            </li>
            <li><a href="#">Estilo Propio</a>
            </li>
            <li><a href="#">Flavor</a>
            </li>
          </ul>
        </li>
      </ul>
      <!-- Lista Menu -->
    </div>
    <!-- Menu -->

How can I include that HTML code on each page?

Answer:

The easiest way to do it is using jQuery, which you must include in your project, and then use the load function to place it in some node of your web, in this case I used a div with the class "menuContainer" and the menu I have put in a file called menu.html

Important: You must have a web server running on localhost to be able to use this function since if you open the file through the url "file: ///your_file.html" through the browser it will give you a cross-origin error, if you don't have a server running web you can mount it very easily with python3 using the http.server module or in nodejs using http-server.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="menuContainer"></div>
</body>

  <script>
    $(document).ready(function () {
      $('.menuContainer').load('./menu.html');
    });
  </script>
</html>
Scroll to Top