Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to include HTML code snippets in HTML ?

  • Difficulty Level : Expert
  • Last Updated : 11 Nov, 2021

In this article, we will learn how to include HTML snippets in HTML code. We will include the HTML code snippet of “gfg.html” into “index.html“. To achieve this task, we are going to write a JavaScript function in “index.html” which traverses the collection of all HTML elements in “gfg.html” and searches for elements with specific attributes. It creates an HTTP request with the attribute value as the file name. In the end, we will differentiate between the main “index.html” file and included the “gfg.html” snippet.

Approach:

  • Create two HTML files “index.html” and “gfg.html“.
  • Create another HTML file for including the “index.html” file.
  • Create a JavaScript function in the main HTML file for including the HTML Snippet.
  • Call the function in the main ( “index.html“) file to include the snippet of “gfg.html“.

Step 1: Create the main HTML file named “index.html” file. This file will display a heading text ‘This is index.html’.

 

HTML






<!DOCTYPE html>
<html>
  
<body>
    <h1 align='center'>
        <font color='Red'>
            This is index.html 
        </font>
    </h1>
</body>
  
</html>

Output:

Step 2: Create another HTML file of your choice for including in the “index.html” file and save this file in the same directory in which “index.html” is present. In this article, create an HTML file named “gfg.html” which displays ” GeeksforGeeks A Computer Science Portal For Geeks “.

HTML




<!DOCTYPE html>
<html>
  
<style>
    body {
        text-align: center;
    }
  
    .gfg {
        font-size: 180px;
        font-weight: bold;
        color: green;
    }
  
    .geeks {
        font-size: 50px;
        font-weight: bold;
        font-family: Arial;
    }
</style>
  
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
        A computer science portal for geeks
    </div>
  
    <h1>
        <font color='Blue'>
            This is gfg.html 
        </font>
    </h1>
</body>
  
</html>

Output:

Step 3: We are going to include the “gfg.html” snippet in the “index.html” file. Including HTML is done by using a GFG-include-html-snippet attribute.

<div GFG-include-html-snippet="gfg.html"></div>

Add the JavaScript

  • Traverse the collection of all HTML elements.
  • Search for elements with specific attributes.
  • Create an HTTP request with the attribute value as the file name.
  • Delete the attribute and call this function again.
  • Exit function.

JavaScript code snippet:



Javascript




<script>
    function includeHTMLSnippet() {
  
        // Traverse the collection of all
        // HTML elements
        id = document.getElementsByTagName("*");
        for (i = 0; i < id.length; i++) {
            element = id[i];
  
            // Search for elements with
            // specific attributes
            file = element.getAttribute(
                "GFG-include-html-snippet");
  
            if (file) {
                  
                // Create an HTTP request with 
                // the attribute value as the
                // file name
                xmlRequest = new XMLHttpRequest();
                xmlRequest.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) { 
                            element.innerHTML = this.responseText; 
                        }
                          
                        if (this.status == 404) { 
                            element.innerHTML = "Page not found."
                        }
                          
                        // Delete the attribute and
                        // call this function again.
                        element.removeAttribute(
                            "GFG-include-html-snippet");
  
                        includeHTMLSnippet();
                    }
                }
                xmlRequest.open("GET", file, true);
                xmlRequest.send();
                return; // Exit function.
            }
        }
    };
</script>

Step 4: Call includeHTMLSnippet() at the bottom of the page.

<script>
    includeHTMLSnippet();
</script>

Final code: The following code demonstrates the combination of all the above steps.

index.html




<!DOCTYPE html>
<html>
  
<head>
    <script>
        function includeHTMLSnippet() {
  
            // Traverse the collection of
            // all HTML elements
            id = document.getElementsByTagName("*");
            for (i = 0; i < id.length; i++) {
                element = id[i];
  
                // Search for elements with
                // specific attributes
                file = element.getAttribute(
                    "GFG-include-html-snippet");
  
                if (file) {
  
                    // Create an HTTP request with the 
                    // attribute value as the file name
                    xmlRequest = new XMLHttpRequest();
                    xmlRequest.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) { 
                                element.innerHTML = this.responseText; 
                            }
                              
                            if (this.status == 404) { 
                                element.innerHTML = "Page not found.";
                            }
                              
                            // Delete the attribute and
                            // call this function again
                            element.removeAttribute(
                                "GFG-include-html-snippet");
  
                            includeHTMLSnippet();
                        }
                    }
                    xmlRequest.open("GET", file, true);
                    xmlRequest.send();
                    return; // Exit function.
                }
            }
        };
    </script>
</head>
  
<body>
    <h1 align='center'>
        <font color='Red'>
            This is index.html 
        </font>
    </h1>
  
    <div GFG-include-html-snippet="gfg.html"></div>
      
    <script>
        includeHTMLSnippet();
    </script>
</body>
  
</html>

gfg.html




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
  
        .gfg {
            font-size: 140px;
            font-weight: bold;
            color: green;
        }
  
        .geeks {
            font-size: 50px;
            font-weight: bold;
            font-family: Arial;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        GeeksforGeeks
    </div>
      
    <div class="geeks">
        A computer science portal for geeks
    </div>
      
    <h1>
        <font color='Blue'>
            This is gfg.html
        </font>
    </h1>
</body>
  
</html>

Output:

Differentiating included gfg.html snippet in index.html: The red border indicates the output of the main index.html and the blue border indicates the output of included HTML snippet.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!