How to load HTML in a div tag using JavaScript

Question

I am just practicing to make a college website. There are 3 tags in a body one as a <header> and second as a div and third as a footer. I have some HTML in another about.html without <body> and <head>tags. In my style.css file I have styled for about.html. I want only one thing that whenever I click on About it replace the code with the <div id="content"></div> that is in about.html. How do I load an HTML page in a <div> using JavaScript?

Note: The CSS provided in snippet is not responsive. I want to decided to done this step than ahead to responsive

Here is code that i want to replace with the given in snippet.

<section id="home">
    <div class="main">
        <h1 class="slide">The Biggest</h1>
        <h1 class="slide">Educational</h1>
        <h1 class="slide">Network</h1>
        <h1 class="slide">Punjab Group</h1>
        <h1 class="slide">Of Colleges</h1>
        <h1 class="slide">Hafizabad</h1>
    </div>
    <div class="swipe">
        <img src="./PGC_Stock/chevron-down.svg" alt="swipe">
    </div>
</section>
<section id="team">
    <div class="card-container">
        <div class="cards" id="card-1">
            <img src="./PGC_Stock/ADMIN/khizar_abbas_sqr.jpg" alt="khizar_abbas">
            <div>
                <h1 class="name">Khizar Abbas</h1>
                <p class="status">IT Manager At PGC-Hafizabad</p>
            </div>
        </div>
        <div class="cards" id="card-2">
            <img src="./PGC_Stock/ADMIN/hafiz_fahad_sqr.jpg" alt="hafiz_fahad">
            <div>
                <h1 class="name">Hafiz Fahad</h1>
                <p class="status">Principal At PGC-Hafizabad</p>
            </div>
        </div>
        <div class="cards" id="card-3">
            <img src="./PGC_Stock/ADMIN/salman_butt.jpg" alt="salman_butt">
            <div>
                <h1 class="name">Salman Butt</h1>
                <p class="status">Vice Principal At PGC-Hafizabad</p>
            </div>
        </div>
        <div class="cards" id="card-5">
            <img src="./PGC_Stock/ADMIN/mian_afzal-scaled_sqr.jpg" alt="mian-afzal">
            <div>
                <h1 class="name">Sohail Afzal</h1>
                <p class="status">Executive Director PGC</p>
            </div>
        </div>
        <div class="cards" id="card-4">
            <img src="./PGC_Stock/ADMIN/mianamer_sqr.jpg" alt="mian-amer">
            <div>
                <h1 class="name">Mian Amer Mahmood</h1>
                <p class="status">Chairman PGC</p>
            </div>
        </div>
    </div>
</section>

:root {
  --blue-color: #2c2b6f;
  --red-color: #e13a27;
  --red_2_color: #e13b28;
  --blue_2-color: #2c2b6d;
  --white-color: #ffffff;
  --font-light: GalanoGrotesque;
  --font-bold: GalanoGrotesque-Bold;
}

* {
  font-family: var(--font-light);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: var(--white-color);
  background-color: var(--blue-color);
}


/* Styling NavBar */

#navbar {
  position: relative;
  display: flex;
  width: 100%;
  height: 75px;
  align-items: center;
  justify-content: space-between;
  min-width: 100%;
}

#navbar::before {
  content: "";
  position: absolute;
  min-width: 100%;
  background-color: var(--red_2_color);
  z-index: -1;
  height: 100%;
}


/* Styling Logo */

.logo {
  margin-left: 10px;
  width: 120px;
}


/* Styling Nav-Links */

#nav-links {
  display: flex;
  list-style: none;
}

#nav-links a {
  text-decoration: none;
  color: var(--white-color);
}

.nav-links {
  margin: 0 15px;
  font-size: 1.08rem;
  position: relative;
  cursor: pointer;
  text-transform: uppercase;
}


/* Styling Social Links */

#social-links {
  margin-right: 10px;
}

.social-links {
  filter: invert();
  margin: 0 5px;
}

.social-links img {
  width: 25px;
  transition: all 300ms ease;
}

.social-links img:hover {
  transform: scale(1.5);
}


/* Styling NavBar Finished */

/* Styling Default Content */
#content {
  position: relative;
  margin-top: 10px;
  height: 100vh;
}

#content::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../PGC_Stock/sldier-bg-gradient1.jpg") center center/cover
    no-repeat;
  z-index: -1;
}

#content {
  background-image: url(../PGC_Stock/slide-bg.png);
  background-size: 900px;
  background-repeat: no-repeat;
  background-position: bottom right;
}

#content div {
  position: absolute;
  left: 5%;
  top: 20%;
  display: flex;
  flex-direction: column;
}

#content span h1 {
  text-transform: uppercase;
  font-size: 4rem;
  line-height: 1;
}

.para {
  margin-top: 5px;
  font-size: 1.3rem;
}

.btn {
  margin-top: 5px;
  color: var(--blue-color);
  padding: 5px 5px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  background-color: var(--white-color);
  border: none;
  border-radius: 5px;
  font-size: 1.5rem;
  width: 150px;
}

#footer {
  height: 60px;
  background-color: var(--red-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

<!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>Punjab Group Of Colleges | Hafizabad</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <header>
    <nav id="navbar">
      <div id="logo">
        <img class="logo" src="./PGC_Stock/LOGO/logo.svg" alt="logo">
      </div>
      <ul id="nav-links">
        <a>
          <li class="nav-links" onclick="about()">About</li>
        </a>
        <a>
          <li class="nav-links">Programmes</li>
        </a>
        <a>
          <li class="nav-links">Life At Campus</li>
        </a>
        <a>
          <li class="nav-links">Gallery</li>
        </a>
        <a>
          <li class="nav-links">Contact Us</li>
        </a>
      </ul>
      <div id="social-links">
        <a class="social-links" href="https://www.facebook.com/pgchfdofficial" target="_blank"><img src="./PGC_Stock/LOGO/facebook.png" alt="facebook"></a>
        <a class="social-links" href="https://www.instagram.com/pgchfd/" target="_blank"><img src="./PGC_Stock/LOGO/instagram.png" alt="instagram"></a>
        <a class="social-links" href="GATXUWWYDFFHN4SK64F6H3X6UVUCRGMR6BXJ4JAPT2MMG5QI5VRQLQNE" target="_blank"><img src="./PGC_Stock/LOGO/youtube.png" alt="youtube"></a>
      </div>
    </nav>
  </header>
  <section id="content">
    <div>
      <span>
                <h1 id="1">A Legacy Of</h1>
                <h1 id="2">Excellence</h1>
            </span>
      <span class="para">Pre 1st Year Admissions Open</span>
      <button class="btn" id="apply">Apply Now!</button>
    </div>
  </section>
  <footer id="footer">
    <p>Punjab Colleges Hafizabad</p>
    <p class="copy">&copy; 2021 Punjab Colleges. All Rights Reserved.</p>
    <div id="social-links">
      <a class="social-links" href="https://www.facebook.com/pgchfdofficial" target="_blank"><img src="./PGC_Stock/LOGO/facebook.png" alt="facebook"></a>
      <a class="social-links" href="https://www.instagram.com/pgchfd/" target="_blank"><img src="./PGC_Stock/LOGO/instagram.png" alt="instagram"></a>
      <a class="social-links" href="GATXUWWYDFFHN4SK64F6H3X6UVUCRGMR6BXJ4JAPT2MMG5QI5VRQLQNE" target="_blank"><img src="./PGC_Stock/LOGO/youtube.png" alt="youtube"></a>
    </div>
  </footer>
</body>

</html>

You can use element.innerHTML, element.appendChild, etc. functions. More on DOM Manipulation here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents — Avinash Thakur, Sep 18 '21 at 08:24
You need to send an ajax request that fetches the content of the `about.html` page and use the callback to identify the elements on your page to replace, remove them and insert new html — Professor Abronsius, Sep 18 '21 at 08:27
@ProfessorAbronsius your answer helped me to solve problem but one issue is that cant load css here the complete code with script you had given and some correction in nav-links [link](https://jsfiddle.net/m_naeem66622/wxp61a9t/18/) sorry but i don't know how to attach a file with fiddle i'm just novice to these resources. So the content i want to load is given in my question post — m-naeem66622, Sep 20 '21 at 21:58
Cannot replicate the problem you are having. I tried and everything works as expected - newly added HTML from `about.html` is styled using rules from the css given on the linked jsFiddle example. — Professor Abronsius, Sep 21 '21 at 06:51
@ProfessorAbronsius So you want to say that there is no solution about it?? — m-naeem66622, Sep 21 '21 at 16:40
it all seems to work OK for me so I guess that you have other issues which I cannot know. How do you know that the CSS is NOT applied? — Professor Abronsius, Sep 21 '21 at 22:31
@ProfessorAbronsius Can we talk on whatsapp or messenger plzz message me social links are in bio i will explain it to you more clearly here i don't know how to explain? — m-naeem66622, Sep 22 '21 at 03:25

score 3 · Answer 1 · answered Sep 18 '21 at 08:44

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

<ul id="nav-links">
    <li class="nav-links about"><a href='#'>About</a></li>
    <li class="nav-links"><a href='#'>Programmes</a></li>
    <li class="nav-links"><a href='#'>Life At Campus</a></li>
    <li class="nav-links"><a href='#'>Gallery</a></li>
    <li class="nav-links"><a href='#'>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.

Sorry i am late.. Thanks so much for this helpful answer. This answer is most helpful but one issue is that can't apply css to the html that has been loaded. if you resolve this issue i will again very thankful... — m-naeem66622, Sep 20 '21 at 21:35

score 0 · Answer 2 · edited Sep 21 '21 at 08:32

0

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

edited Sep 21 '21 at 08:32

m-naeem66622

425
1
5
16

answered Sep 18 '21 at 09:05

Rohan Jadhav

48
7

i am not familiar with it even i don't know anything about it it is difficult for me to use it – m-naeem66622 Sep 20 '21 at 02:12
Bootstrap is very simple and helpful to implement if you want I can give you a code shortly implementing bootstrap modals. I will add comments to explain things there – Rohan Jadhav Sep 20 '21 at 02:57

How to load HTML in a div tag using JavaScript

2 Answers2