How to include a html file inside another html file with Vanilla Javascript?
Question
I want to create a single page web application with pure Vanilla Js, not React Js or another. What I want is when I click on a menu link, I want it to include another html file and show up the result without reloading. I did it with include(), get(), load() in jQuery. But I want to do it with pure vanilla Js, if possible, even though with some tricks.
Here is the one of the things I did with jQuery:
$('.link-about').click(function(){
$('.my-div').load('about-page.html');
});
As shown above, how it should work is that I click a link and another html file loads.
2 answers
solution1
0 2021-01-07 18:22:53
Try this
<!DOCTYPE html>
<html>
<head lang="en" dir="ltr">
<script type="text/javascript">
async function load_home()
{
var content = document.getElementById("content");
content.innerHTML = await (await fetch('next.html')).text();
}
</script>
</head>
<body>
<div id="content"></div>
<button onclick="load_home()"> load</button>
</body>
</html>
solution2
0 ACCPTED 2021-01-07 18:34:28
You can try this. I am considering elements has id
<script>
document.getElementById('link-about').onclick = function() {
document.getElementById('my-div').innerHTML = '<object data="about.html" >'
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.