How To Load Html In A Div Tag Using Javascript

I am just practicing to make a college website. There are 3 tags in a body one as a

and second as a div and third as a footer. I have some HTML in another about.htm

Solution 1:

If you modify the about list element slightly to add a new class called about and remove the inline click handler, like so:

<ulid="nav-links"><liclass="nav-links about"><ahref='#'>About</a></li><liclass="nav-links"><ahref='#'>Programmes</a></li><liclass="nav-links"><ahref='#'>Life At Campus</a></li><liclass="nav-links"><ahref='#'>Gallery</a></li><liclass="nav-links"><ahref='#'>Contact Us</a></li></ul>

Note that the hyperlink/anchor is within the li element - it is invalid as a direct child of ul!

Then attach an event listener in a script at the end of the body section like so:

<script>document.querySelector('.about').addEventListener('click',function(){
        let content=document.querySelector('section#content');
        fetch( 'about.html' )
            .then( r=>r.text() )
            .then( html=>{
                content.insertAdjacentHTML('beforebegin',html)
                content.parentNode.removeChild(content)
        })
    })
</script>

This will send an ajax request that reads about.html and returns it as a string. This string of HTML is then inserted into the DOM before the section id='content' and that section is then removed.

Solution 2:

So far from all, I understand that you want content of about.html to appear on current html page. If I am not wrong then I would suggest you to look over bootstrap V5 where you can implement modals where you can place any html elements it will pop up based on actions. 1: this link will take you to introduction page where you will see pre-requisite to use Bootstrap 5 Introduction · Bootstrap v5.1

2: this link will take you to modals explained perfectly (it may look at first Unrelated to topic but give a try copy the code and run on ur localhost or any server and try to explore) Modal · Bootstrap v5.1 Hope that helped you atleast some extent. If not also do explore through different benifits of Bootstrap 5 (if u have not explored). Thank you