CODEWITHSUNDEEP
javascripthtml
user14408646
user14408646

Reputation:

How to include a html file inside another html file with Vanilla Javascript?

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.

Upvotes: 0

Views: 4596

Answers (2)

Bhavesh Khandelwal
Bhavesh Khandelwal

Reputation: 66

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>

Upvotes: 0

WiatroBosy
WiatroBosy

Reputation: 1124

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>

Upvotes: 2

Related Questions