How to include HTML in other HTML?

Navigation
1

I have a menu for my website, the problem is that if I change it I will have to modify many files (around 40) I thought then include the file using JavaScript with the document.write () function but I do not know how to add it 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?

    
asked by Victor Alvarado 16.05.2017 в 01:26
source

1 answer

4

The simplest 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 I put it in a file called menu.html

Important: You must have a web server running on localhost in order to use this function because if you open the file using the url "file: ///your_file.html" using the browser it will give you an error of cross-origin, if you do not have a web server running you can mount it very easily with python3 using the module http.server 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>
    
answered by 16.05.2017 в 06:17
A simple program in C ++ is locked in the third variable How do I get an onclick inside append ()?