HTML, CSS, Javascript, Jquery Load the contents of one HTML file and load it inside of the div of another HTML file

$(function(){   $.get("header.html", function(data){
    $("#header").html(data);   }); });

So I am eventually going to have to do this in java but for now I just want to do this in the javascript extension known as jquery but any format that makes this work will please me.

I have 2 files:
header.html

<!-- Header -->
<div class="row navigationBar">

  <!-- Company Logo -->
  <div class="col-2">
    <img src="images/GCB.png" alt="GCB-logo" class="gcb-logo">
  </div>

  <!-- Top Bar -->
  <div class="col-md-10">
    <div class="top-navigationBar">
      <nav class="navbar navbar-expand-md quick-help">

        <!-- Collapse Button -->
        <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Quick Help -->
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link black-font blue-line" href="">CONSULTATION</a>
            </li>
            <li class="nav-item">
              <a class="nav-link black-font blue-line" href="">CUSTOMER SUPPORT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link black-font blue-line" href="">TIẾNG VIỆT</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

    <!-- Bottom Bar -->
    <div>
      <nav class="navbar navbar-expand-md bottom-navigationBar">
        <div class="row bottom-navigationBar">

          <!-- Quick Navigation -->
          <div class="col-4">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <button type="button" class="btn btn-primary btn-sm thick-font button-flat-bottom">Checking</button>
              </li>
              <li class="nav-item">
                <button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Savings</button>
              </li>
              <li class="nav-item">
                <button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Loans</button>
              </li>
            </ul>
          </div>

          <!-- Bank Name -->
          <div class="col-md-4">
            <h1 class="bank-name">Go<span class="orange-text">Com</span>Bank</h1>
          </div>

          <!-- Login Form -->
          <div class="login-container">
            <form action="/action_page.php">
              <input type="text" placeholder="Username" name="username">
              <input type="text" placeholder="Password" name="psw">
              <button type="button" class="btn btn-primary btn-sm">Login</button>
            </form>
          </div>

        </div>
      </nav>
    </div>
  </div>
</div>
<!-- Header End -->

and the webpage
webpage.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="header"></div>
  </body>
</html>

I am trying to load header.html and set it into the id=("header") of webpage.html

Currently the only code that works is $("#header").html("")
Using this format I can set things like

<p>Hello World</p>

but it doesn’t work when I want to add the loaded header.html items.

15 thoughts on “HTML, CSS, Javascript, Jquery Load the contents of one HTML file and load it inside of the div of another HTML file”

Leave a Comment