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

Kundan :

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.

Manjuboyz :

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');

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

Guess you like