How to replace the contents of a div with content from another html file

Seanmc2
April 25, 2023
257 views
0 votes
2 Answers

I have a page with three divs: container, side-nav, content.
I want to replace the HTML in the body div with the HTML in another (source) HTML file when I click a link in the side-nav.

index.html

<div class="float-container">
   <div class="sidenav">
     <a href="#about">About</a>
     <a href="#services">Services</a>
     <a href="#clients">Clients</a>
   </div>

   <div class="body">
      <p>some text here.</p>
   </div>

</div>

about.html

<h1>About Me</h1>
<p> yada yada yada</p>

Answers

The achieve this, use an <iframe>. HTML files can be directly loaded into iframes using the src attribute.

const ibody = document.querySelector('iframe.body')
document.querySelectorAll('.sidenav>a').forEach(a => {
  a.addEventListener('click', evt => {
    ibody.src = a.innerHTML.toLowerCase() + '.html'
    console.log('loaded ' + ibody.src + ' into iframe')
  })
})

.float-container {
  display: grid;
  grid-template-columns: 100px auto;
}

.sidenav {
  border: 1px solid red;
}

.sidenav a {
  display: block;
  cursor: pointer;
}

.body {
  width: 100%;
  height: 400px;
  border: 1px solid blue;
}

<div class="float-container">
   <div class="sidenav">
     <a>About</a>
     <a>Services</a>
     <a>Clients</a>
   </div>

   <iframe class="body" frameborder="0"></iframe>
</div>