Question 258545 in Html Question posted in
Some basic documentation can be found here.

How to include HTML in HTML

I want to include an HTML snippet in another HTML file. I am trying to do this, so I have the following files inside a directory:

include.js
include_this.html
main.html

with the following contents:

main.html:

<html>
    <head>
        <title>Whatever</title>
    </head>
    <body>
        <h1>Including</h1>
        <p>This was not included.</p>
        <div w3-include-html="include_this.html"></div>
        <script src="include.js"></script>
    </body>
</html>

include_this.html:

<p>This was included</p>

include.js:

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;
    }
  }
}

includeHTML();

Now, when I open this with any web browser all I see is this:

enter image description here

Why doesn’t it work? How can I include the include_this.html snippet inside main.html?

Tags:

2

Answers


  1. 0

    Another solution is to have the HTML inside of your JS file. This will allow you to use a single JS file and embed the extra HTML as needed.

    I’m using template literals to wrap the content that way I can easily use new lines in my HTML instead of having it on one line or other solutions for that problem.

    const dynamicContent = document.querySelector("#dynamicContent");

const newContent = `
  <p>NEW embedded content</p>
`;

dynamicContent.innerHTML = newContent;
    content in HTML
<div id="dynamicContent"></div>
    Login or Signup to reply.
  2. 0

    I tested your code and it works like it is supoused to.
    Your problem might be

    "I have the following files inside a directory"

    You are not serving your pages with a web server, so probably ajax wont work, if you see file:// on your address bar then it will not work.

    I recomend you using some simple web server or http server to serve your files as a web site in some address like http://localhost:8080/main.html

    You can verify this by using DevTools in Chrome or any Chromium based browser hitting F12, going to Network tab, and looking for the include_this.html line, you can see there the result of the fetching.
    Also you can go and check the console for errors.

    By the way, all the XmlHttp part could be smaller using Fetch API like the following

    fetch(file).then(response=>response.text()).then(responseText=>elmnt.innerHTML=responseText)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search