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

Question

$(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.

--NEW CONTENT WITH ANSWER IN PROGRESS--

So none of the answers have even come close to being correct but I have came up with my own solution that should in theory work but I have been unable to implement it myself.

Before the res.send(/*HTML Code Here*/); I propose this solution:: A: load the HTML file into a var B: load the insertion code into another var C: A.replace("ReplaceKeyword", B); D: res.send(A);

This method has worked for me when I use java and it sometimes works with jQuery but I can't seem to find the appropriate syntax to do this inside of javascript.

If you can provide the code to implement this then I can mark your response as the answer.

Note A is something like

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

B is something like

<p>Hello World</p>

Replace keyword in this instance would be ""

The End result that is sent in the res.send() is

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <p>Hello World</p>
      </body>
    </html>

=====================================

So you can try the `header.html` full path something like `http://website.com/somefolder/header.html` — Mohamed-Yousef, Feb 11 '21 at 01:56
header.html is the full path. index.html, headerLoader.js and header.html are all offline files inside of the same folder — fake name, Feb 11 '21 at 02:01
Then I don't know .. but what I know is `$("#header").load("header.html");` this code with `.load` is a simple/correct way to get the external html file — Mohamed-Yousef, Feb 11 '21 at 02:05
[how-to-load-external-html-into-a-div](https://stackoverflow.com/questions/19370417/how-to-load-external-html-into-a-div) — Mohamed-Yousef, Feb 11 '21 at 02:08
Since links expire over time and they are filled with many unrelated things I would prefer if you actually enter the information that you think is relevant to my question. I have seen nothing new in this link. — fake name, Feb 11 '21 at 02:13

ngakpunya · Answer 1 · 2021-02-11T10:18:52.137

try this

<script>
document.getElementById("header").innerHTML='<object type="text/html" data="header.html"></object>';
</script>

Edited for new method
i found this on w3school. I already try it and i think this can solve your problem https://www.w3schools.com/howto/howto_html_include.asp

<script>
    includeHTML();

    function includeHTML() {
        var z, i, elmnt, file, xhttp;
        /*loop through a collection of all HTML elements:*/
        z = document.getElementsByTagName("*");
        for (i = 0; i < z.length; i++) {
            elmnt = z[i];
            /*search for elements with a certain atrribute:*/
            file = elmnt.getAttribute("w3-include-html");
            if (file) {
                /*make an HTTP request using the attribute value as the file name:*/
                xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            elmnt.innerHTML = this.responseText;
                        }
                        if (this.status == 404) {
                            elmnt.innerHTML = "Page not found.";
                        }
                        /*remove the attribute, and call this function once more:*/
                        elmnt.removeAttribute("w3-include-html");
                        includeHTML();
                    }
                }
                xhttp.open("GET", file, true);
                xhttp.send();
                /*exit the function:*/
                return;
            }
        }
    };
</script>

on your body tag add something like this

<div w3-include-html="header.html"></div>

as long as you add w3-include-html attribute it will work, and you can add your stylesheet at the top of webpage.html

I've taken out the script tags and it finally loaded but as a misshapen tiny square in the top right of the page with none of the css loaded — fake name, Feb 11 '21 at 02:11
I did, this method creates a whole new web page sloppily glued to the top of my existing page with its own vertical and horizontal scroll bars. I'm looking to have it take the header and the footer and make it load into the page html like if I just copied and pasted the header and footer into every webpage (which is what I am trying to avoid since every webpage will have the same header and footer) — fake name, Feb 11 '21 at 09:22

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

1 Answers1