How to load external HTML file using jQuery ?
Last Updated :
15 Dec, 2022
Improve
In this article, we will learn how to load an external HTML file into a div element.
The following jQuery functions are used in the example codes.
- ready(): The ready event occurs when the DOM (document object model) has been loaded.
- load(): The load() method loads data from a server and gets the returned data into the selected element.
Note: We will use the ready() function to ensure that our DOM is completely ready before doing any further tasks. We will load the external HTML using load() function.
Approach:
- First, we will create our external HTML file.
- Add a div element on the HTML file where we want to load external HTML.
- Under the script, use the ready() function to check if DOM ready.
- Then select the div element on which we want to load HTML using load().
External files: The following div-1.html and div-2.html files are used as external files.
div-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>div-1</title>
</head>
<body>
<p>This content is from first div.</p>
</body>
</html>
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>div-1</title></head><body> <p>This content is from first div.</p></body></html>div-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>div 2</title>
</head>
<body>
<p>This is content from second div</p>
</body>
</html>
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>div 2</title></head><body> <p>This is content from second div</p></body></html>HTML code: The following code demonstrates the loading of external files into an HTML div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Some CSS -->
<style>
div {
border: 2px solid green;
width: fit-content;
margin: 20px auto;
padding: 2px 20px;
cursor: pointer;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<!-- First div -->
<div id="div-1">
First Div
<p>Click to load first html</p>
</div>
<!-- Second div -->
<div id="div-2">
Second div
<p>Click to load first html</p>
</div>
<!-- Script -->
<script>
// Check if file is completely ready
$(document).ready(function () {
// Adding click event on id div-1
// if it clicked then anonymous
// function will be called
$('#div-1').click(function () {
// Load the external html
// here this refers to
// current selector
$(this).load('div-1.html');
});
// Same as above
$('#div-2').click(function () {
$(this).load('div-2.html');
});
});
</script>
</body>
</html>
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <!-- Some CSS --> <style> div { border: 2px solid green; width: fit-content; margin: 20px auto; padding: 2px 20px; cursor: pointer; } p { font-size: 14px; } </style></head><body> <!-- First div --> <div id="div-1"> First Div <p>Click to load first html</p> </div> <!-- Second div --> <div id="div-2"> Second div <p>Click to load first html</p> </div> <!-- Script --> <script> // Check if file is completely ready $(document).ready(function () { // Adding click event on id div-1 // if it clicked then anonymous // function will be called $('#div-1').click(function () { // Load the external html // here this refers to // current selector $(this).load('div-1.html'); }); // Same as above $('#div-2').click(function () { $(this).load('div-2.html'); }); }); </script></body></html>Output:
Note: We are using the jQuery click() function, which means the external file will be loaded after we clicked on it. But if you want to load external files just after DOM is ready, just omit the click() event and call the load() function
