How do I load an HTML page in a div using JavaScript?

Question

I want home.html to load in <div id="content">.

<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
      function load_home(){
            document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
  }
</script>

This works fine when I use Firefox. When I use Google Chrome, it asks for plug-in. How do I get it working in Google Chrome?

And remember to return false as in load_home(); return false — mplungjan
– mplungjan, Commented Jul 14, 2013 at 4:37
Not too easy without libraries. Might be better off loading into an iFrame. Check this post out: stackoverflow.com/questions/14470135/… — sgeddes
– sgeddes, Commented Jul 14, 2013 at 4:41
home.html is a simple web page, I just named it home. @jayharris — Giliweed
– Giliweed, Commented Jul 14, 2013 at 4:46
And you're trying to load everything on that page into the content element, or just place a link to the page in the content element ? — adeneo
– adeneo, Commented Jul 14, 2013 at 4:47
I'm trying to load everything on that page into the content element. I edited the question. @adeneo — Giliweed
– Giliweed, Commented Jul 14, 2013 at 5:08

Georg Plaz · Accepted Answer · 2019-01-21 13:14:45Z

245

I finally found the answer to my problem. The solution is

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

edited Jan 21, 2019 at 13:14

Georg Plaz

6,0185 gold badges43 silver badges66 bronze badges

answered Jul 14, 2013 at 19:16

Giliweed

5,1959 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

David Over a year ago

Even though this is elegant and clean, I suppose it would be better if you actually created the object element through the DOM api.

Sam Redway Over a year ago

This is slow and insecure to attack - see my answer below (was too long to fit in comment)

Xsmael Over a year ago

@DavidMaes what do you suggest ? can you show a sample ?

rwarner Over a year ago

While this may be insecure, if you're doing a simple "local within a folder on your desktop" development this is fine -- not everyone is running a bank website with clients handling bank account information and running into a XSS attack. Thanks for the solution, for my needs I ended up having to go another route and requiring a python server and using the regular Jquery load() function for external dynamically loaded html. But this was helpful for getting me along in my issue

Shayan Over a year ago

@KamilKiełczewski type="type/html" is changed to type="text/html"

|

Jay Harris · Accepted Answer · 2019-01-22 02:07:21Z

76

Fetch API

function load_home (e) {
    (e || window.event).preventDefault();

    fetch("http://www.yoursite.com/home.html" /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
}

XHR API

function load_home (e) {
  (e || window.event).preventDefault();
  var con = document.getElementById('content')
  ,   xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
  }

  xhr.open("GET", "http://www.yoursite.com/home.html", true);
  xhr.setRequestHeader('Content-type', 'text/html');
  xhr.send();
}

based on your constraints you should use ajax and make sure that your javascript is loaded before the markup that calls the load_home() function

Reference - davidwalsh

MDN - Using Fetch

JSFIDDLE demo

edited Jan 22, 2019 at 2:07

answered Jul 14, 2013 at 4:54

Jay Harris

4,27120 silver badges22 bronze badges

4 Comments

Giliweed Over a year ago

thanks. but my code relates to a part of a project. and sorry to say I'm not suppose to use iframe in the project work. I edited the question. have a look @jay harris

ArunRaj Over a year ago

@Jay Harris : What about the same origin policy ?

Jay Harris Over a year ago

@ArunRaj you can't load a page that comes from another website within javascript bc it's a security concern. but you can load a script from your server, that will in turn load that other page and echo it back to javascript via ajax.

mindplay.dk Over a year ago

Adding a Content-Type header to a GET request makes no sense - I think you meant setRequestHeader("Accept", "text/html") ?

Aaron Liske · Accepted Answer · 2013-07-14 04:41:47Z

72

You can use the jQuery load function:

<div id="topBar">
    <a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("content.html");
    });
});
</script>

Sorry. Edited for the on click instead of on load.

edited Jul 14, 2013 at 4:41

answered Jul 14, 2013 at 4:34

Aaron Liske

7945 silver badges7 bronze badges

1 Comment

NoChance Over a year ago

Hi, I tried to use this method but I can't get it to work. I can open a new question if you want. Thanks. My fiddle is here:jsfiddle.net/ekareem/aq9Laaew/288345

droduit · Accepted Answer · 2020-01-31 02:30:14Z

42

Fetching HTML the modern Javascript way

This approach makes use of modern Javascript features like async/await and the fetch API. It downloads HTML as text and then feeds it to the innerHTML of your container element.

/**
  * @param {String} url - address for the HTML to fetch
  * @return {String} the resulting HTML string fragment
  */
async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

// this is your `load_home() function`
async function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

The await (await fetch(url)).text() may seem a bit tricky, but it's easy to explain. It has two asynchronous steps and you could rewrite that function like this:

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

See the fetch API documentation for more details.

edited Jan 31, 2020 at 2:30

droduit

551 silver badge7 bronze badges

answered Sep 15, 2018 at 22:18

Lucio Paiva

21.1k11 gold badges88 silver badges110 bronze badges

7 Comments

Mae Cana Over a year ago

For those that are having problems using this, make sure that the functions are written outside of the "window.onload" function.

Stênio Barroso de Moraes Over a year ago

Show de bola é o que eu queria.

NoMoreErrors Over a year ago

I've put the fetchHtmlAsText() and loadHome() functions in /reusable/js/test.js file. How do I call this function from /index.html and /article/sample.html to be able to load a common header located in /reusable/header.html?

NoMoreErrors Over a year ago

Tried to do this.. <body><content onload="loadHome()"></content></body> failed :(

NoMoreErrors Over a year ago

async function fetchHtmlAsText(url) { return await (await fetch(url)).text(); } // this is your load_home() function async function loadHeader() { const contentDiv = document.getElementById("headercontent"); contentDiv.innerHTML = await fetchHtmlAsText("/reusable/header.html"); } async function loadFooter() { const contentDiv = document.getElementById("footercontent"); contentDiv.innerHTML = await fetchHtmlAsText("/reusable/footer.html"); } async function loadHeaderfooter() { loadHeader(); loadFooter(); } window.onload = loadHeaderfooter();

|

Sam Redway · Accepted Answer · 2015-09-21 18:45:17Z

I saw this and thought it looked quite nice so I ran some tests on it.

It may seem like a clean approach, but in terms of performance it is lagging by 50% compared by the time it took to load a page with jQuery load function or using the vanilla javascript approach of XMLHttpRequest which were roughly similar to each other.

I imagine this is because under the hood it gets the page in the exact same fashion but it also has to deal with constructing a whole new HTMLElement object as well.

In summary I suggest using jQuery. The syntax is about as easy to use as it can be and it has a nicely structured call back for you to use. It is also relatively fast. The vanilla approach may be faster by an unnoticeable few milliseconds, but the syntax is confusing. I would only use this in an environment where I didn't have access to jQuery.

Here is the code I used to test - it is fairly rudimentary but the times came back very consistent across multiple tries so I would say precise to around +- 5ms in each case. Tests were run in Chrome from my own home server:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        /**
        * Test harness to find out the best method for dynamically loading a
        * html page into your app.
        */
        var test_times  = {};
        var test_page   = 'testpage.htm';
        var content_div = document.getElementById('content');

        // TEST 1 = use jQuery to load in testpage.htm and time it.
        /*
        function test_()
        {
            var start = new Date().getTime();
            $(content_div).load(test_page, function() {
                alert(new Date().getTime() - start);
            });
        }

        // 1044
        */

        // TEST 2 = use <object> to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = '<object type="text/html" data="' + test_page +
            '" onload="alert(new Date().getTime() - start)"></object>'
        }

        //1579
        */

        // TEST 3 = use httpObject to load in testpage.htm and time it.
       function test_()
       {
           var xmlHttp = new XMLHttpRequest();

           xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                {
                   content_div.innerHTML = xmlHttp.responseText;
                   alert(new Date().getTime() - start);
                }
            };

            start = new Date().getTime();

            xmlHttp.open("GET", test_page, true); // true for asynchronous
            xmlHttp.send(null);

            // 1039
        }

        // Main - run tests
        test_();
    </script>
</body>
</html>

I mean I ran it many times and there was only a swing of a few milliseconds each time. So the times given are accurate to +- 5ms or something close to that. Sorry I may not have been entirely clear there.

Kamil Kiełczewski · Accepted Answer · 2019-03-29 17:36:07Z

9

try

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

async function load_home() {
  let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'

  content.innerHTML = await (await fetch(url)).text();
}

<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>

answered Mar 29, 2019 at 17:36

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

serup · Accepted Answer · 2014-04-15 09:48:44Z

5

When using

$("#content").load("content.html");

Then remember that you can not "debug" in chrome locally, because XMLHttpRequest cannot load -- This does NOT mean that it does not work, it just means that you need to test your code on same domain aka. your server

answered Apr 15, 2014 at 9:48

serup

5455 silver badges12 bronze badges

1 Comment

KittenCodings Over a year ago

"jQuery" != "javascript" || jQuery < javascript || OP.indexOf("jQuery") < 1

Anup · Accepted Answer · 2015-05-22 10:45:38Z

5

You can use the jQuery :

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});

edited May 22, 2015 at 10:45

answered May 22, 2015 at 10:00

Anup

3,3611 gold badge30 silver badges39 bronze badges

3 Comments

David Over a year ago

Please explain your answer. Also this looks like jQuery which the OP did not mention in the question.

Anup Over a year ago

sir here some more answers is in jquery

Luca Over a year ago

jQuery is pretty standard to do such Ajax calls; so I find the answer concise and appropriate.

Georg Plaz · Accepted Answer · 2019-01-21 13:11:11Z

4

$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

or

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

edited Jan 21, 2019 at 13:11

Georg Plaz

6,0185 gold badges43 silver badges66 bronze badges

answered Oct 31, 2018 at 11:26

Krishna pattar

612 bronze badges

Comments

Andrzej Sydor · Accepted Answer · 2020-11-16 00:18:35Z

1

<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){

    $(selector).load(argHtml);
 
});
var targetElem = document.querySelector(selector);
    targetElem.innerHTML = html;
};

var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>

this one worked for me when I tried to add a snippet of HTML to my main.html. Please don't forget to add ajax in your code pass class or id as a selector and the link to the HTML snippet as argHtml

edited Nov 16, 2020 at 0:18

Andrzej Sydor

1,4166 gold badges14 silver badges32 bronze badges

answered Nov 15, 2020 at 17:15

Arshal Daison

1261 silver badge6 bronze badges

Comments

Abdullahi · Accepted Answer · 2015-08-08 11:07:28Z

0

There is this plugin on github that load content into an element. Here is the repo

https://github.com/abdi0987/ViaJS

answered Aug 8, 2015 at 11:07

Abdullahi

1548 bronze badges

Comments

NMV · Accepted Answer · 2021-11-18 18:19:23Z

0

I use jquery, I found it easier

$(function() {
    $("#navigation").load("navbar.html");
});

in a separate file and then load javascript file on html page

answered Nov 18, 2021 at 18:19

NMV

154 bronze badges

Comments

womd · Accepted Answer · 2022-04-05 10:03:04Z

load html form a remote page ( where we have CORS access )
parse the result-html for a specific portion of the page
insert that part of the page in a div on current-page

//load page via jquery-ajax
$.ajax({
   url: "https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript",
   context: document.body
}).done(function(data) {

//the previous request fails beceaus we dont have CORS on this url.... just for illlustration...

   //get a list of DOM-Nodes 
   var dom_nodes = $($.parseHTML(data));

  //find the question-header
   var content = dom_nodes.find('#question-header');

  //create a new div and set the question-header as it's content 
   var newEl = document.createElement("div");
  $(newEl).html(content.html());
   
  //on our page, insert it in div with id 'inserthere'
  $("[id$='inserthere']").append(newEl);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>part-result from other page:</p>
<div id="inserthere"></div>

Cak Sup · Accepted Answer · 2019-12-27 17:27:37Z

-1

Use this simple code

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```

answered Dec 27, 2019 at 17:27

community wiki

Cak Sup

2 Comments

toing_toing Over a year ago

w3.includeHTML() is not defined

Dai Over a year ago

For those wondering, w3-include-HTML is part of W3Schools.com's W3.JS script library (available here: w3schools.com/w3js/default.asp ). I want to point out that W3Schools (and w3.js, and w3.includeHTML()) are not in any way affiliated with the W3 Consortium (one of the two main groups that define the HTML+CSS+DOM standards (the other group being WHATWG).

Ermis · Accepted Answer · 2021-04-28 11:02:24Z

-1

This is usually needed when you want to include header.php or whatever page.

In Javascript it's easy especially if you have HTML page and don't want to use php include function but at all you should write php function and add it as Javascript function in script tag.

In this case you should write it without function followed by name Just. Script rage the function word and start the include header.php i.e convert the php include function to Javascript function in script tag and place all your content in that included file.

edited Apr 28, 2021 at 11:02

Ermis

156 bronze badges

answered Oct 31, 2018 at 11:38

Creative87

1259 bronze badges

Comments

Rudolf Remšík · Accepted Answer · 2014-06-09 09:00:54Z

showhide.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        function showHide(switchTextDiv, showHideDiv)
        {
          var std = document.getElementById(switchTextDiv);
          var shd = document.getElementById(showHideDiv);
          if (shd.style.display == "block")
          {
            shd.style.display = "none";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>"; 
          }
          else
          {
            if (shd.innerHTML.length <= 0)
            {
              shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
            }
            shd.style.display = "block";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
          }
        }
      </script>
    </head>
    <body>
      <a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
        <span style="display: block; background-color: yellow">Show</span>
      </a>
      <div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
    </body>
</html>

showhide_embedded.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript"> 
        function load()
        {
          var ts = document.getElementById("theString");
          ts.scrollIntoView(true);
        }
      </script>
    </head>
    <body onload="load()">
      <pre>
        some text 1
        some text 2
        some text 3
        some text 4
        some text 5
        <span id="theString" style="background-color: yellow">some text 6 highlight</span>
        some text 7
        some text 8
        some text 9
      </pre>
    </body>
</html>

Answering with an answer that doesn't correspond to the question, also its already been answered by the same person who asked it

Jain Abhishek · Accepted Answer · 2017-02-17 10:38:45Z

-4

If your html file resides locally then go for iframe instead of the tag. tags do not work cross-browser, and are mostly used for Flash

For ex : <iframe src="home.html" width="100" height="100"/>

answered Feb 17, 2017 at 10:38

Jain Abhishek

274 bronze badges

Collectives™ on Stack Overflow

How do I load an HTML page in a div using JavaScript?

17 Answers 17

8 Comments

4 Comments

1 Comment

Fetching HTML the modern Javascript way

7 Comments

2 Comments

Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

8 Comments

4 Comments

1 Comment

Fetching HTML the modern Javascript way

7 Comments

2 Comments

Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related