jQuery load() Method

What You’ll Learn

.load() is the simplest way to pull HTML from a server and drop it into a page region. This tutorial covers the official signature, automatic DOM insertion, GET vs POST based on the data argument, URL fragment selectors, the complete callback with responseText and jqXHR, script execution rules, empty-set behavior, and when to prefer $.get() or full $.ajax().

Introduction

Tab panels, infinite-scroll footers, admin sidebars — many UI patterns need a chunk of HTML from the server without reloading the whole page. jQuery solves that in one line: $( "#panel" ).load( "sidebar.html" ). The method fetches the URL, and on success replaces the inner HTML of every matched element with the response.

.load() is roughly $.get() plus .html() with the wiring done for you. Unlike global Ajax shorthands, it is a collection method — you call it on a jQuery selection, not on jQuery itself. It returns the same jQuery object for chaining (add classes, bind events). When you need a fragment of a remote page — not the whole document — append a selector after a space in the URL string.

Understanding .load()

.load() sends an Ajax request and inserts the returned HTML into matched elements. The request runs only if the jQuery collection contains at least one element — an empty selection is a no-op and no network call is made.

On success (textStatus is "success" or "notmodified"), jQuery sets each element’s contents via .html(). If you provide a complete callback, it fires once per matched element after insertion, with this set to that DOM node.

📝 Syntax

The official jQuery API accepts one signature:

Collection method — .load( url [, data ] [, complete ] )

jQuery( selector ).load( url [, data ] [, complete ] )

URL fragment selector

$( "#result" ).load( "article.html #comments" );
// Fetches article.html, extracts #comments, inserts into #result

Equivalence to $.get() + .html()

// Shorthand — implicit success handler
$( "#result" ).load( "ajax/test.html" );

// Manual equivalent
$.get( "ajax/test.html", function( html ) {
  $( "#result" ).html( html );
} );

complete callback signature

• responseText — raw HTML string returned by the server (may be empty on error).
• textStatus — "success", "notmodified", "error", etc.
• jqXHR — the jqXHR object for the request; inspect jqXHR.status on errors.

Request method

• GET — when only url (and optional complete) is provided.
• POST — when a data object or string is provided.

Return value

• Returns the jQuery collection — chain .addClass(), .find(), etc.
• Does not return jqXHR directly — use the third argument or global Ajax events for request details.

Examples Gallery

Five progressive examples from a basic HTML load through fragment selectors, POST data, error handling in the complete callback, and a tab-style lazy panel. Each links to a Try-it lab where you can edit and run the code in the browser.

$( "#result" ).load( "https://httpbin.org/html" );

// Equivalent intent:
// GET the URL → on success, set #result innerHTML to response

GET https://httpbin.org/html → HTML inserted into #result

#result shows the remote page body (e.g. h1 heading and paragraph)

Uses GET — no data argument provided

// Space separates URL from selector — only h1 is inserted
$( "#snippet" ).load( "https://httpbin.org/html h1" );

// Same pattern for local partials:
$( "#new-projects" ).load( "/resources/load.html #projects li" );

Full document fetched → jQuery parses with .innerHTML rules

Only "h1" nodes extracted → inserted into #snippet

Scripts stripped — not executed with selector suffix

$( "#feeds" ).load(
  "feeds.php",
  { limit: 25 },
  function( responseText, status, jqXHR ) {
    alert( "The last 25 entries in the feed have been loaded" );
  }
);

// Arrays in POST body:
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

data object present → POST feeds.php with limit=25 in body

Server returns HTML → inserted into #feeds

complete callback runs after insertion (once per matched element)

$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status === "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
} );

// On success, #success gets HTML; on error, #error shows status

404 or network failure → status === "error"

#error shows "Sorry but there was an error: 404 Not Found"

#success may stay empty — old content not cleared on error

var loaded = false;

$( "#tab-details" ).on( "click", function() {
  if ( loaded ) {
    return;
  }
  $( "#details-panel" )
    .html( "<p>Loading…</p>" )
    .load( "https://httpbin.org/html h1", function( response, status ) {
      if ( status === "success" ) {
        loaded = true;
        $( this ).prepend( "<small>Loaded once</small><br>" );
      }
    } );
} );

First click → "Loading…" then fragment h1 inserted

Second click → no-op (loaded flag)

.complete callback: this === #details-panel DOM element

🚀 Common Use Cases

• Tab panels — load each tab’s HTML on first activation instead of all at once.
• Modals & drawers — fetch form partials into a dialog container on open.
• Pagination — replace a list region with the next page HTML from the server.
• Admin widgets — pull dashboard snippets into sidebar slots.
• Help tooltips — load expanded help content on hover or click.
• Legacy server templates — reuse existing PHP/JSP partials that return HTML fragments.

📝 Notes

• .load() is a collection method — call it on $(selector), not on jQuery globally.
• Returns the jQuery collection, not jqXHR — use the complete callback for status details.
• Empty set: no matched elements means no Ajax request.
• Fragment URL: space separates URL from selector — scripts in fragment loads do not execute.
• Full URL load: scripts may run before discard — only load trusted HTML.
• POST when data provided — plain object or string in the second argument.
• Prior to jQuery 3.0, .load() conflicted with the window load event binding — removed in 3.0.
• Same-origin: cross-domain loads require CORS unless using JSONP (not supported by .load()).

💡 Best Practices