Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Add A Html File Into Another Html File?

Post a Comment
lets pretend i've a html file - 'main.html' & another html file 'content.html' i want to add content on main. i made the content, where content's - Width = window.innerWidth

Solution 1:

To dynamically load content, you could make an AJAX call using XMLHttpRequest().

In this example a url is passed to the loadPage() function, in which the loaded content is returned.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript">
            function loadPage(href)
            {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", href, false);
                xmlhttp.send();
                return xmlhttp.responseText;
            }
        </script>
    </head>

    <body>
        <div onClick="document.getElementById('bottom').innerHTML = 
                      loadPage('content.html');">Home</div>

        <div id="bottom"></div>
    </body>

</html>

When the div element containing text of "Home" is clicked, it sets the html of div element with id of "bottom" to content found in the "hello-world.html" document at the same relative location.

content.html

<p>Your content</p>

Post a Comment for "How To Add A Html File Into Another Html File?"