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><htmllang="en"><head><scripttype="text/javascript">functionloadPage(href)
            {
                var xmlhttp = newXMLHttpRequest();
                xmlhttp.open("GET", href, false);
                xmlhttp.send();
                return xmlhttp.responseText;
            }
        </script></head><body><divonClick="document.getElementById('bottom').innerHTML = 
                      loadPage('content.html');">Home</div><divid="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?"