What is a promise in Javascript?

Question

Dev 200

Asked: 2020-05-16 15:26:05 +0800 CST 2020-05-16 15:26:05 +0800 CST 2020-05-16 15:26:05 +0800 CST

How to include HTML in other HTML?

772

I have a menu for my web page, the problem is that if I want to change it I will have to modify many files (around 40) so I thought 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 in each page?

3 Answers

Voted

pedronalbert · Answer 1 · 2020-05-16T20:17:20+08:00

Best Answer

pedronalbert

2020-05-16T20:17:20+08:002020-05-16T20:17:20+08:00

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 "menuContainer" class 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 do not have a server web running 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>

11

itaca9 · Answer 2 · 2020-09-01T07:17:21+08:00

I have encountered the same problem and I have looked for several ways to do it, in addition to the load method that @pedronalbert has previously commented on

One way to do it using only javascript is with the XMLHttpRequest object (I have tested it locally using the server simulation of the xampp program, which is also used to make the load response given above work):

This consists of creating the navigation bar in a separate file:

nav.html

<ul>
    <li><a href="inicio.html">Inici</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Fotos</a></li>
    <li><a href="#">Contacto</a></li>
</ul>

And then call that file from the other files:

home.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Título de la página</title>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'nav.html');
        xhr.setRequestHeader('Content-Type', 'text/plain');
        xhr.send();
        xhr.onload = function (data) {
            document.querySelector("nav").innerHTML = data.currentTarget.response;
            //para más de una barra de navegación
            /*var navs = document.querySelectorAll("nav");
            for(var i=0; i<navs.length; i++) {
                navs[i].innerHTML = data.currentTarget.response;
            }*/
            
        };
    </script>
</head>
<body>
    <div class="contenedor">
        <header>
            <!-- barra de navegación -->
            <nav></nav>
        </header>
    </div>
</body>
</html>

And as an alternative to jQuery's load method, there is also the $.ajax method (also from jQuery). From what I have been able to find they are more or less equivalent, but $.ajax allows you to customize the operation more

Another option to do this is to use the php include function. However, as before, it is necessary to do a server simulation... because if the error that @pedronalbert told you about does not appear

nav.html

<nav>
    <ul>
        <li><a href="inicio.php">Inici</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Fotos</a></li>
        <li><a href="#">Contacte</a></li>
    </ul>
</nav>

(Consider that when including php code in a file it must have the extension .php, not .html):

home.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Título de la página</title>
    </head>
<body>
    <div class="contenedor">
        <header>
            <!-- barra de navegación -->
            <?php include "nav.html"; ?>
        </header>
    </div>
</body>
</html>

Nightly · Answer 3 · 2020-09-02T12:49:49+08:00

Nightly

2020-09-02T12:49:49+08:002020-09-02T12:49:49+08:00

The best you can do is use dynamic content, like PHP, Python, Perl, etc...

But if you want something static, you could create a page that is your menu and on each page that you want to appear use the iframe tag....

The iframe tag allows you to display one page from another.

Example:

You create the "index.html" and where the menu goes write:

<iframe src="./menú.html"></iframe>

You create a "menú.html" file and in the body you add the links plus the target="_blank" attribute:

<a href="otra_pag.html" target="_blank"> Otra Pag </a >

The disadvantage of this method is that a new tab is opened for each menu entry, in this case it is better to use dynamic content (like Django's template system in Python, which solves this problem very well)...

2

How to include HTML in other HTML?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?