How to load a html file into a div element in under five minutes

in this video we are going to look at how we can load a separate html file's content into a development using javascript and we're going to do that in under five minutes i'm david and i post videos like this every monday let's get started for this example we need two files an index.html file which you can see in your screen and an index.js file which will contain our javascript code in the index.html file the two lines of importance are line 4 which contains a reference to our javascript file and line 14 which contains our div element which will accept the html from an external file if you want to follow along in this demonstration then pause now and copy the code that you can see on your screen in our index.js file i've added a simple function called load html currently inside that function we have a console.log message that displays our functions parameters the parameters are the id for the div element that will contain our html file and the file name that will contain our external html snippet again if you want to follow along in this demonstration then pause now and copy the code that you see on your screen in our html file we have four anchor tags that trigger our load html function when the anchor tag is clicked there on lines 9 through to 12. the first three links display the html files stored in our templates directory they are template one template two and template three and the fourth on line 12 links to a non-existent file to demonstrate what happens when we can't find the requested file you'll need to mimic this file structure if you're following along and the html files can contain any html and when we load our html page using the url localhost 5000 we'll see our html page with the four anchor tags and the div element that will contain our html snippets from our external html files stored in our template directory in our load html function we'll start by adding the variables we need our xhttp variable will contain our xmlhttprequest object that we'll use to interact with the server this allows us to retrieve data from a url without reloading the page and don't worry it doesn't actually involve any xml our element variable will contain a reference to our div element where we will display the contents of our external html file snippets and finally our file variable will contain the name of the file that contains our html snippet with the variables out of the way we need a condition that checks to see that we have a file name inside that condition we instantiate our xmlhttprequest object now that we have our object instantiated we need to declare the onreadystatechangehandler that will be called whenever the xmlhttprequest ready state changes and the on ready state change handler is simply a function that looks like the following on line 12 we have a condition that checks that our ready state is set to four the number four indicates that the ready state is done on line 13 we have another condition that checks if our status equals 200. 200 is an http status code that indicates that our request is okay in turn when we know that the request is okay we set our div elements in our html to the response text the response text will contain the data from our external html file on line 14 we have another condition that checks to see if our status is 404. photo4 is an http status code that indicates that the request could not find our file and if we receive a 404 we populate our div element with a simple error message page not found at this point in the exercise we haven't requested our data we've just determined what to do when we request our data and that request happens on line 17 and line 18. line 17 initializes the request and line 18 will send the request at that point the handler function that we created earlier will be called into action and that is effectively the code let's go to our page and try it out and there you have it when we click our links the appropriate html file is displayed and when we click the link that has no file we get our error message and that's pretty much it that is how you load an external html snippet into a development so this is not a technique that you see often and most developers would probably default to iframes rather than the xml http request object but it's useful to know that this technique is out there and available to you i use this technique in my current project where i am creating a web clone of the 90s macintosh classic escape velocity i use the html file inclusion method discussed in this tutorial to load the station window where the player can buy commodities etc etc in this scenario it was useful to separate the station view html from the main html file that contained the game canvas and i may call on this technique again if i decide to create a more detailed start screen if you found this content useful then please consider hitting the like button and subscribing to the channel because there will be more videos like this in the future also if you like web games then check out my nova project where i'm currently creating a web clone of the 90s macintosh game escape velocity i also have other tutorials that show you how to draw on the canvas api resize the canvas programmatically and a series of videos on how to use canvas api to create games i also do other videos related to programming videos are published every monday and last but not least thanks for watching [Music] [Music] you

Channel: David Reid

Views: 1,044

Keywords: load a html file into a div element, load a html file snippet into a div element, load a html file into another file using javascript, including a html file in another html file, load the contents of a html file into a div in another html file, loading html files, including html files, using xmlhttprequestobject to load a html file into a div, using xmlhttprequestobject to load a html file into another html file, using javascript to load the contents of one html file into a div

Id: woE-wZXiY-Q

Length: 6min 26sec (386 seconds)

Published: Mon Sep 20 2021