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: developer.mozilla.org/en-US/docs/Learn/JavaScript/… — Avinash Thakur
– Avinash Thakur, Commented Sep 18, 2021 at 8: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
– Professor Abronsius, Commented Sep 18, 2021 at 8:27

Professor Abronsius · Accepted Answer · 2021-09-18 08:44:18Z

3

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.

answered Sep 18, 2021 at 8:44

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

m-naeem66622 Over a year ago

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 · Accepted Answer · 2021-09-21 08:32:07Z

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, 2021 at 8:32

m-naeem66622

4951 gold badge8 silver badges20 bronze badges

answered Sep 18, 2021 at 9:05

Rohan Jadhav

487 bronze badges

2 Comments

m-naeem66622 Over a year ago

i am not familiar with it even i don't know anything about it it is difficult for me to use it

Rohan Jadhav Over a year ago

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

Collectives™ on Stack Overflow

How to load HTML in a div tag using JavaScript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related