W3.JS HTML Includes
Include an HTML file:
w3.includeHTML()
The HTML
Save the HTML you want to include in an .html file:
content.html
<a href="https://w3.p2hp.com/html/">HTML</a><br>
<a
href="https://w3.p2hp.com/css/">CSS</a><br>
<a
href="https://w3.p2hp.com/bootstrap/">Bootstrap</a><br>
<a
href="https://w3.p2hp.com/js/">JavaScript</a><br>
<a
href="https://w3.p2hp.com/sql/">SQL</a><br>
<a
href="https://w3.p2hp.com/php/">PHP</a><br>
<a
href="https://w3.p2hp.com/w3css/">W3.CSS</a><br>
Include the HTML
Including HTML is done by using a w3-include-html attribute:
Example
<div w3-include-html="content.html"></div>
Add the JavaScript
HTML includes are done by JavaScript.
Make sure your page has w3.js loaded and call w3.includeHTML():
Example
<script>
w3.includeHTML();
</script>
Full Example
Example
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
Try it Yourself »
With CSS »
Include Many HTML Snippets
You can include any number of HTML snippets:
Example
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
<html>
Adding a Callback Function
When you include HTML snippets in a web page, you must secure that other functions that depends on the included HTML do not execute before the HTML is properly included.
The easiest way to "hold back" code is to place it in a callback function.
A callback function can be added as an argument to w3.includeHTML():
Example
<script>
w3.includeHTML(myCallback);
function myCallback() {
// code that has to wait goes here
}
</script>
You will find a callback example in the next chapter of this tutorial.
