Splitting large HTML file into smaller blocks and importing each file to a div?-CodePudding

I have an HTML file with around 4000 lines of code, it's a single-page website and it needs to stay that way.

The site is made up of 8 different 100vh div-s. Think about it like an 8-page full-size hero slider and each slide has something on it.

Debugging and editing this file is becoming a nightmare.

Is it possible to separate each part/component/section/div (whatever) into its own HTML file and import them into another HTML file? Like how it is done on React.

basically:

split index.html into 8 parts a.html, b.html, and so on.

import a.html into index.html and make it visible in a div, and do the same for b.html, place it in another div below a.html

CodePudding user response：

You can use PHP and its include() function to have a main (php) file in which you include 8 or whatever number of files that contain HTML code.

Except of the including this hardly requires any other PHP code, i.e. that's easy to learn with any PHP basics tutorial.

CodePudding user response：

I have no idea if the following would be sensible or not but in principle it should work.

You could try using JavaScript's insertAdjacentHTML() method:

In your HTML file:

<!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>Document</title>                                                     
</head>                                                                         
<body>                                                                          
    <div id='file1-div'></div>                                                  
    <div id='file2-div'></div>                                                  
    <script src='file1.js'></script>                                            
    <script src='file2.js'></script>                                            
</body>                                                                         
</html>

Then in file1.js you could have:

const file1Div = document.querySelector('#file1-div');                          
file1Div.insertAdjacentHTML('beforeend', `                                      
    
    <!-- your HTML goes here -->                                                                 
    <p>Hello World from file1.js</p>                                            
                                                                                
`);

and in file2.js you could have:

const file2Div = document.querySelector('#file2-div');                          
file2Div.insertAdjacentHTML('beforeend', `                                      

    <!-- your HTML goes here -->                                                         
    <p>Hello World from file2.js</p>                                            
                                                                                
`);

An advantage of this over using PHP or Node.js is you don't need PHP or Node.js running on the server.