CODEWITHSUNDEEP
javascripthtml
Kundan
Kundan

Reputation: 1952

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

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.

Upvotes: 1

Views: 3199

Answers (4)

SAMUEL
SAMUEL

Reputation: 8552

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.

Read more about it here

2. Server side inclueds using some server side programming languages

<?
php include 'header.php';
?>

Read more about it here

3. Using some build tools like gulp or grunt or webpack

https://www.npmjs.com/package/file-include-webpack-plugin

https://www.npmjs.com/package/gulp-file-include

4. Using HTML imports

HTML imports is an exciting technology that promises to change how we build websites. Imports allow you to include HTML documents within other HTML documents.

Read more about it here

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

https://blog.teamtreehouse.com/introduction-html-imports

This one is recomended but not works with older browser

Upvotes: 0

Manjuboyz
Manjuboyz

Reputation: 7056

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

Upvotes: 1

floverdevel
floverdevel

Reputation: 150

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>

Upvotes: 0

Sam Washington
Sam Washington

Reputation: 670

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

Upvotes: 0

Related Questions