Skip to main content

How to Load an HTML Page into a div using JavaScript

A common requirement for creating dynamic web applications is to load content from an external HTML file and inject it into a specific <div> on the current page. This technique, often associated with AJAX (Asynchronous JavaScript and XML), allows you to update parts of a page without a full browser refresh.

This guide will teach you the modern and most effective method for this task using the fetch API. We will also briefly cover older methods like using an <object> tag or jQuery for historical context.

The Core Task: Fetching and Injecting HTML​

The goal is to retrieve the HTML content from another file (e.g., content.html) and place it inside a container element (e.g., <div id="container">) on the main page.

index.html (Main Page):

<body>
  <h1>Main Page</h1>
  <div id="container">
    <!-- Content will be loaded here -->
  </div>
  <script src="main.js"></script>
</body>

content.html (File to be Loaded):

<p>This is the content from the external file.</p>

The fetch API is the standard, built-in browser tool for making network requests. It is the best practice for this task because it is powerful, flexible, and promise-based, making it ideal for async/await syntax.

The logic:

  1. Use fetch() to make a GET request for the HTML file.
  2. Use the response.text() method to get the response body as a string.
  3. Set the .innerHTML property of the target <div> to this HTML string.

Solution: main.js:

async function loadContent() {
  const container = document.getElementById('container');

  try {
    // 1. Fetch the content of the HTML file
    const response = await fetch('content.html');
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // 2. Get the response body as a string
    const html = await response.text();

    // 3. Set the innerHTML of the container
    container.innerHTML = html;
  } catch (error) {
    console.error('Error loading page:', error);
    container.innerHTML = '<p>Failed to load content.</p>';
  }
}

// Call the function to load the content when the page loads
loadContent();

How the fetch Method Works​

  • fetch('content.html'): This initiates an asynchronous HTTP GET request to the specified URL.
  • await response.text(): The Response object from fetch does not contain the body directly. The .text() method reads the response stream to completion and returns a promise that resolves with the full text content.
  • container.innerHTML = html: This is the final step. The browser parses the HTML string and creates the corresponding DOM elements inside the container div.
warning

Security Note: Be cautious when using .innerHTML. Only use it with content from a trusted source (like your own server). Using it with untrusted, user-generated content can expose your site to Cross-Site Scripting (XSS) attacks.

Older Methods (<object> and jQuery)​

While fetch is the modern standard, you may encounter these methods in older codebases.

  • Using an <object> tag:

    const container = document.getElementById('container');
    container.innerHTML = '<object type="text/html" data="content.html" width="100%" height="100%"></object>';

    This method effectively embeds one document inside another, similar to an <iframe>. It can be simple but is less flexible than fetch and can have styling and scripting complexities.

  • Using jQuery's .load(): For many years, jQuery provided the simplest syntax for this task.

    // Requires the jQuery library to be included
    $('#container').load('content.html');

    This is very concise but requires adding the entire jQuery library to your project, which is often unnecessary today given the power of the native fetch API.

Practical Example: A Simple Tabbed Interface​

This script uses fetch to load different content into a div when a user clicks a button, creating a basic tab system.

HTML:

<nav>
  <button data-page="home.html">Home</button>
  <button data-page="about.html">About</button>
</nav>
<div id="content-area"></div>

JavaScript:

const contentArea = document.getElementById('content-area');
const nav = document.querySelector('nav');

async function loadPage(url) {
  try {
    const response = await fetch(url);
    const html = await response.text();
    contentArea.innerHTML = html;
  } catch (error) {
    contentArea.innerHTML = '<p>Error loading content.</p>';
  }
}

nav.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    const pageUrl = event.target.dataset.page;
    if (pageUrl) {
      loadPage(pageUrl);
    }
  }
});

// Load the initial page
loadPage('home.html');

Conclusion​

For loading external HTML content into a div, the modern fetch API is the clear best choice.

  • The fetch API is the recommended best practice. It is a powerful, flexible, and standard browser feature that works perfectly with async/await.
  • The process is simple: fetch the file, get the response as .text(), and set the .innerHTML of your container.
  • Older methods like using an <object> tag or jQuery's .load() are functional but are generally considered outdated for this specific task.

Table of Contents