Inserting Multiple HTML Sources into a Webpage

Complete details on this module are available at the bottom of this page.

This will insert HTML content from another file into your current webpage:

This script simply inserts an external html file into a DIV in a webpage on your website.

head-elements.js adds items into the HEAD, such as a favicon or meta information.

This uses two jquery scripts and one java script to insert content.

JQuery: jquery-3.3.1.js

JQuery: jquery-3.6.0.js

javascript: head-elements.js

HTML Example:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
<script type="text/javascript" src="/js/head-elements.js"</script>
<script>  // Uses jquery-3.3.1.js
  $(document).ready(function(){
  $('#header').load("/assets/snippets/header-white.html");
  $('#page').load("/assets/content/blank.html");
  $('#footer').load("/assets/snippets/footer-main.html");
});
</script>
<head>
<body>
<div id="header"></div>
<div id="page"></div>
<div id="footer"></div>
</body>
</html>

This script simply inserts an external html file into a DIV in a webpage on your website.

head-elements.js adds items into the HEAD, such as a favicon or meta information.