jQuery load() Method

The load() method fetches an HTML file (or a part of it) from the server and injects it into a selected element. It is the simplest jQuery AJAX method. You call it on the element where you want the content to appear, and pass the URL of the content to load.

Basic Syntax

$(selector).load(url, data, callback);

// selector → where the loaded content goes
// url      → the HTML file or URL to fetch
// data     → optional data to send with the request (POST)
// callback → optional function that runs after loading

Basic Example

HTML:
<div id="news-section"></div>
<button id="loadNews">Load Latest News</button>

jQuery:
$(document).ready(function() {
    $("#loadNews").click(function() {
        $("#news-section").load("news.html");
    });
});

Clicking the button fetches news.html and places its entire content inside #news-section.

Diagram: load() in Action

  Before click:
  ┌──────────────────────────┐
  │  #news-section (empty)   │
  └──────────────────────────┘

  After click:
  Browser fetches news.html from server
       │
  Content of news.html inserted into #news-section
       │
  ┌──────────────────────────────────────┐
  │  #news-section                       │
  │  <h3>Top Story</h3>                  │
  │  <p>Breaking news today...</p>       │
  └──────────────────────────────────────┘

Loading Only Part of a File

You can load a specific section of a file using a URL fragment. Add a space after the URL and write a jQuery selector to pick only the matching content from the fetched file.

// Load only the element with id="featured" from news.html
$("#news-section").load("news.html #featured");

// Load only the first article from news.html
$("#news-section").load("news.html article:first");

Diagram: Partial Content Load

  news.html contains:
  <div id="featured">...Top Story...</div>
  <div id="archive">...Old Stories...</div>

  .load("news.html #featured")
         │
  Fetches full news.html (behind the scenes)
  Extracts only <div id="featured">
  Inserts it into the target element on your page

  #archive never appears on your page.

load() with Callback Function

The callback runs after the content is loaded — whether it succeeded or failed. Three parameters are passed: responseText, statusCode, and xhr.

$(document).ready(function() {
    $("#content").load("sidebar.html", function(response, status, xhr) {
        if (status === "error") {
            $("#content").html("<p>Could not load content. Please try again.</p>");
        } else {
            console.log("Content loaded successfully!");
        }
    });
});

load() with POST Data

When you pass a data object as the second argument, load() automatically uses POST instead of GET.

// GET request (no data)
$("#result").load("search.php?q=jquery");

// POST request (with data object)
$("#result").load("search.php", { q: "jquery", page: 1 }, function() {
    console.log("Search results loaded.");
});

Practical: Navigation with load()

HTML:
<nav>
    <a class="nav-link" href="home.html">Home</a>
    <a class="nav-link" href="about.html">About</a>
    <a class="nav-link" href="contact.html">Contact</a>
</nav>
<div id="main-content"></div>

jQuery:
$(document).ready(function() {
    // Load Home by default
    $("#main-content").load("home.html");

    $(".nav-link").click(function(e) {
        e.preventDefault();
        var page = $(this).attr("href");
        $("#main-content").load(page, function() {
            $(".nav-link").removeClass("active");
            $("a[href='" + page + "']").addClass("active");
        });
    });
});

Diagram: Single-Page Navigation Pattern

  Page layout:
  ┌─────────────────────────────────────────────┐
  │  [Home]  [About]  [Contact]  ← nav stays    │
  ├─────────────────────────────────────────────┤
  │  #main-content                              │
  │  ← only this area changes on each click     │
  └─────────────────────────────────────────────┘

load() vs $.get() for HTML

Quick Summary

• $(selector).load(url) fetches an HTML file and injects it into the selected element.
• Load a specific section using a space + jQuery selector after the URL: "file.html #section".
• Pass a data object to send a POST request instead of GET.
• The callback receives response, status, and xhr to handle success and failure.
• It is the simplest jQuery AJAX method — one line replaces several lines of code.