DEV Community

Sh Raj
Sh Raj

Posted on

๐Ÿค” Load another HTML file to index.html using JavaScript make index neater ๐Ÿš€

Load another HTML file to index.html using JavaScript without adding it to index.html and make index neater ๐Ÿš€

See for example below is the we have to add in index.html

<section id="portfolio">

        <div class="row section-intro">
        <div class="col-twelve">

            <h5>Portfolio</h5>
            <h1>Check Out Some of My Works.</h1>

            <p class="lead">Lorem ipsum Do commodo in proident enim in dolor cupidatat adipisicing dolore officia nisi aliqua incididunt Ut veniam lorem ipsum Consectetur ut in in eu do.</p>

        </div>          
    </div> <!-- /section-intro--> 

    <div class="row portfolio-content">

        <div class="col-twelve">

            <!-- portfolio-wrapper -->
             <div id="folio-wrapper" class="block-1-2 block-mob-full stack">

                <div class="bgrid folio-item">
                   <div class="item-wrap">
                    <img src="images/portfolio/liberty.jpg" alt="Liberty">
                      <a href="#modal-01" class="overlay">                                 
                         <div class="folio-item-table">
                            <div class="folio-item-cell">
                                       <h3 class="folio-title">Liberty</h3>                             
                                         <span class="folio-types">
                                          Graphic Design
                                       </span>
                                   </div>                           
                         </div>                    
                      </a>
                   </div>                  
                    </div> <!-- /folio-item -->

                    <div class="bgrid folio-item">
                   <div class="item-wrap">
                    <img src="images/portfolio/shutterbug.jpg" alt="Shutterbug">
                    <a href="#modal-02" class="overlay">                                      
                         <div class="folio-item-table">
                            <div class="folio-item-cell">
                                <h3 class="folio-title">Shutterbug</h3>                             
                                        <span class="folio-types">
                                          Web Design
                                      </span>                   
                                   </div>                           
                         </div>                    
                      </a>
                   </div>
                    </div> <!-- /folio-item -->

                <div class="bgrid folio-item">
                   <div class="item-wrap">
                    <img src="images/portfolio/clouds.jpg"alt="Clouds">
                      <a href="#modal-03" class="overlay">                                    
                         <div class="folio-item-table">
                            <div class="folio-item-cell">
                                <h3 class="folio-title">Clouds</h3>                             
                                        <span class="folio-types">
                                          Web Design
                                      </span>                   
                                   </div>                           
                         </div>                    
                      </a>
                   </div>
                    </div> <!-- /folio-item -->

                <div class="bgrid folio-item">
                   <div class="item-wrap">
                    <img src="images/portfolio/beetle.jpg" alt="Beetle">
                      <a href="#modal-04" class="overlay">                                       
                         <div class="folio-item-table">
                            <div class="folio-item-cell">
                                <h3 class="folio-title">Beetle</h3>                             
                                        <span class="folio-types">
                                          Branding
                                      </span>                   
                                   </div>                           
                         </div>                    
                      </a>
                   </div>
                    </div> <!-- /folio-item -->     

                    <div class="bgrid folio-item">
                   <div class="item-wrap">
                    <img src="images/portfolio/lighthouse.jpg" alt="Lighthouse">
                      <a href="#modal-05" class="overlay">                                    
                         <div class="folio-item-table">
                            <div class="folio-item-cell">
                                <h3 class="folio-title">Lighthouse</h3>                             
                                        <span class="folio-types">
                                          Web Development
                                      </span>                   
                                   </div>                           
                         </div>                    
                      </a>
                   </div>
                    </div> <!-- /folio-item -->

                <div class="bgrid folio-item">
                   <div class="item-wrap">
                    <img src="images/portfolio/salad.jpg" alt="Salad">
                      <a href="#modal-06" class="overlay">
                         <div class="folio-item-table">
                            <div class="folio-item-cell">
                                <h3 class="folio-title">Salad</h3>                              
                                        <span class="folio-types">
                                          Branding
                                      </span>                   
                                   </div>                           
                         </div>                    
                      </a>
                   </div>
                    </div> <!-- /folio-item -->   

                <!-- modal popups - begin
                ============================================================= -->
                <div id="modal-01" class="popup-modal slider mfp-hide"> 

                        <div class="media">
                            <img src="images/portfolio/modals/m-liberty.jpg" alt="" />
                        </div>          

                       <div class="description-box">
                          <h4>Liberty</h4>            
                          <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>

                          <div class="categories">Web Development</div>                        
                       </div>

                     <div class="link-box">
                        <a href="http://www.behance.net">Details</a>
                          <a href="#" class="popup-modal-dismiss">Close</a>
                     </div>           

                   </div> <!-- /modal-01 -->

                   <div id="modal-02" class="popup-modal slider mfp-hide">  

                        <div class="media">
                            <img src="images/portfolio/modals/m-shutterbug.jpg" alt="" />
                        </div>          

                       <div class="description-box">
                          <h4>Shutterbug</h4>             
                          <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>

                          <div class="categories">Web Design</div>                         
                       </div>

                     <div class="link-box">
                        <a href="http://www.behance.net">Details</a>
                          <a href="#" class="popup-modal-dismiss">Close</a>
                     </div>           

                   </div> <!-- /modal-02 -->

                   <div id="modal-03" class="popup-modal slider mfp-hide">  

                        <div class="media">
                            <img src="images/portfolio/modals/m-clouds.jpg" alt="" />
                        </div>          

                       <div class="description-box">
                          <h4>Clouds</h4>             
                          <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>

                          <div class="categories">Web Design</div>                         
                       </div>

                     <div class="link-box">
                        <a href="http://www.behance.net">Details</a>
                          <a href="#" class="popup-modal-dismiss">Close</a>
                     </div>           

                   </div> <!-- /modal-03 -->

                   <div id="modal-04" class="popup-modal slider mfp-hide">  

                        <div class="media">
                            <img src="images/portfolio/modals/m-beetle.jpg" alt="" />
                        </div>          

                       <div class="description-box">
                          <h4>Beetle</h4>             
                          <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>

                          <div class="categories">Branding</div>                           
                       </div>

                     <div class="link-box">
                        <a href="http://www.behance.net">Details</a>
                          <a href="#" class="popup-modal-dismiss">Close</a>
                     </div>           

                   </div> <!-- /modal-04 -->

                   <div id="modal-05" class="popup-modal slider mfp-hide">  

                        <div class="media">
                            <img src="images/portfolio/modals/m-lighthouse.jpg" alt="" />
                        </div>          

                       <div class="description-box">
                          <h4>Lighthouse</h4>             
                          <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>

                          <div class="categories">Web Development</div>                        
                       </div>

                     <div class="link-box">
                        <a href="http://www.behance.net">Details</a>
                          <a href="#" class="popup-modal-dismiss">Close</a>
                     </div>           

                   </div> <!-- /modal-05 -->

                   <div id="modal-06" class="popup-modal slider mfp-hide">  

                        <div class="media">
                            <img src="images/portfolio/modals/m-salad.jpg" alt="" />
                        </div>          

                       <div class="description-box">
                          <h4>Salad</h4>              
                          <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>

                          <div class="categories">Branding</div>                           
                       </div>

                     <div class="link-box">
                        <a href="http://www.behance.net">Details</a>
                          <a href="#" class="popup-modal-dismiss">Close</a>
                     </div>           

                   </div> <!-- /modal-06 -->


                   <!-- modal popups - end
                ============================================================= -->

             </div> <!-- /portfolio-wrapper --> 

        </div>  <!-- /twelve -->   

    </div> <!-- /portfolio-content --> 

    </section>
Enter fullscreen mode Exit fullscreen mode

This will make your index.html longer and bulky (You may be get confused with codes) instead you can make a separate file portfolio.html and load the content on index.html using JavaScript.

So, you can keep and edit your files separately without getting confused. ๐Ÿค”

So Below is the example code

<!-- Portfolio Section
   ================================================== -->
   <section id="portfolio"></section>
   <script>
  fetch('portfolio.html')
  .then(response => response.text())
  .then(data => document.getElementById('portfolio').innerHTML = data);
  </script>
 <!-- /portfolio --> 

Enter fullscreen mode Exit fullscreen mode

Load all data in the section tag same as previous one, but it's make your codes(index.html here) separate and neater than previous.

Top comments (0)