How to fetch a particular div from one html file and place it in other html file using normal JavaScript?

Question

I have two html files named homepage.html & dashboard.html at same level under same folder. I only want to fetch a particular div as my main project has a lot of divs.

Here's the code of homepage.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>Homepage</title>
        <link rel="stylesheet" href="css/homepage.css">
    </head>
    <body>
        <div class="homepage-side-menu">
            <div id="homepage-home">
                <label>Home</label>
            </div>
            <div id="homepage-dashboard">
                <label>Dashboard</label>
            </div>
        </div>
        <div id="homepage-main-view"></div>
        <script src="js/homepage.js"></script>
    </body>
</html>

And here's the code of dashboard.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>Dashboard</title>
        <link rel="stylesheet" href="css/dashboard.css">
    </head>
    <body>
        <div class="dashboard-side-menu"></div>
        <div id="dashboard-main-view"></div>
        <script src="js/dashboard.js"></script>
    </body>
</html>

I want to only fetch the content from the div class="homepage-side-menu"> and show it under <div class="dashboard-side-menu"></div> using simple JavaScript.

What is the reason for not just copy pasting it from `homepage` to `dashboard`? — Swimmer F, Mar 06 '20 at 04:21
Have you try using `.load()` with Jquery? https://api.jquery.com/load/ — Stevan Lai, Mar 06 '20 at 04:22
Don't you know how to use `` tags. Put them in your `` and use `addEventListener('load', ()=>{ /* should be available here */ });` on all your pages. Of course, variables used on other pages must be declared outside the load. — StackSlave, Mar 06 '20 at 04:22
Actually when the side bar label is clicked I want to show some other html file content without reloading the page. So the code is just an example/dummy of my original code. — Kundan, Mar 06 '20 at 04:24
Yeah you can read the reference here https://api.jquery.com/load/ — Stevan Lai, Mar 06 '20 at 04:25
``. But really, if you are just adding stuff to the page you're on, it doesn't need to reload if you use AJAX. — StackSlave, Mar 06 '20 at 04:28
If you are looking to reuse site components, you might want to look into coding your page in php, which supports `include`s for templates and snippets. Alternatively, you could try to use a component based Framework such as Vue or React. — Swimmer F, Mar 06 '20 at 04:28
I don't want to load the entire html file, I just want to fetch a particular div that has some particular id. My project has a lot of content the code above contains only the required stuff. — Kundan, Mar 06 '20 at 04:29
Does this answer your question? [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — toh19, Mar 06 '20 at 04:37
I don't want the entire html file, just a div which is inside it. — Kundan, Mar 06 '20 at 04:41

Manjuboyz · Accepted Answer · 2020-03-06T04:43:45.443

1

First you have to refer the file which you want to consume. then you use getElementByClass()

here is how you import the html file into another html

<link href="homepage.html" rel="import" />

or using javascript:

<script> 
  $(function(){
    $("#addContentFromAnotherHTML").load("homepage.html"); 
  });
</script>

and you can view something like this:

<body> 
 <div id="addContentFromAnotherHTML"></div>
</body>

something like this:

 var classData =  document.getElementsByClassName('homepage-side-menu');

edited Mar 06 '20 at 04:43

answered Mar 06 '20 at 04:34

Manjuboyz

6,978
3
21
43

How to refer to that particular file ? – Kundan Mar 06 '20 at 04:35
as you said both are in same directory, I assume no need to use just use above code, it should work for you to get data. – Manjuboyz Mar 06 '20 at 04:37
HTML Imports `` are deprecated and will not work – Hurelu Sep 25 '20 at 14:42

score 0 · Answer 2 · answered Mar 06 '20 at 04:29

0

Since html5 you can use imports

<link rel="import" href="/path/to/imports/stuff.html">

In older browsers the only way is using javascript (XHR, fetch, or Jquery .load

answered Mar 06 '20 at 04:29

Sam Washington

626
4
12

I only want to fetch a particular id from the entire html file. – Kundan Mar 06 '20 at 04:30
HTML Imports `` are deprecated and will not work – Hurelu Sep 25 '20 at 14:41

score 0 · Answer 3 · answered Mar 06 '20 at 04:36

0

Using jQuery you could add this to dashboard.html :

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );
</script>

answered Mar 06 '20 at 04:36

floverdevel

142
7

OP needs a specific class data not the entire html content. – Manjuboyz Mar 06 '20 at 04:39
My sample does exactly that : it takes the content of the div.homepage-side-menu from the homepage.html and put it inside the div.dashboard-side-menu of the dashboard.html – floverdevel Mar 06 '20 at 04:48
you cannot fetch just a portion of a file. you must fetch all the file, then copy only the portion you need into the element you want. jQuery makes it easier to fetch the file and get a portion of it with the load function. – floverdevel Mar 06 '20 at 04:49

score 0 · Answer 4 · answered Mar 06 '20 at 05:21

There are several ways in which you can share HTML template across several pages

1. jQuery - AJAX load() Method

$(selector).load(URL,data,callback);

The load() method loads data from URL and puts the returned data into the selected element.

How to fetch a particular div from one html file and place it in other html file using normal JavaScript?

4 Answers4

Linked