jQuery .load() Method

What Is .load()?

.load(url [, data] [, complete]) fetches data from the server and places the returned HTML into the matched elements (since jQuery 1.0). It is the simplest jQuery Ajax shorthand for injecting HTML — roughly $.get() plus an automatic .html() update.

$("#result").load("ajax/test.html");

// With fragment selector (space + selector):
$("#result").load("ajax/test.html #container");

// POST when data is an object; GET otherwise
$("#feeds").load("feeds.php", { limit: 25 }, function () { /* complete */ });

// Empty selection → no Ajax request is sent

How to Use .load()

Pick a target element, pass a URL, optionally add data or a complete callback.

1. Select the container that should receive HTML (it must exist).
2. Call .load(url) for a GET, or .load(url, data) for a POST.
3. Optionally append a space + selector to load only a fragment.
4. Use the complete callback to react after insertion (or on error).
5. Only load trusted URLs — scripts may run when no fragment selector is used.

Pseudocode

call $(selector).load(url [, data] [, complete])

if no elements matched:
    do nothing (no Ajax)
    return

split url on first space → remoteUrl, optionalFragmentSelector
if data is object/string:
    method = POST
else:
    method = GET

send Ajax request for remoteUrl
when response arrives:
    if success or notmodified:
        if fragmentSelector:
            parse HTML, strip scripts, keep matching nodes
        else:
            set .html(response)  // scripts may execute
    if complete provided:
        for each matched element:
            call complete.call(element, responseText, textStatus, jqXHR)

Cheat Sheet

Keep these facts handy while injecting remote HTML.

Live Preview

Load real HTML into a panel — full page, fragment only, or a failing URL.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("#result").load("ajax/test.html");

// On click:
$("#run").on("click", function () {
  $("#result").load("https://httpbin.org/html");
});

GET the URL → on success
#result shows the remote HTML
Uses GET — no data argument

$("#result").load("ajax/test.html #container");

// Live demo style:
$("#snippet").load("https://httpbin.org/html h1");

Full document fetched
Only matching nodes inserted
Scripts stripped — not executed

$("#result").load("ajax/test.html", function () {
  alert("Load was performed.");
});

$("#panel").load("https://httpbin.org/html h1", function (responseText, status, jqXHR) {
  $("#meta").text("Status: " + status + " | HTTP " + jqXHR.status);
});

HTML inserted into #panel
Callback runs after post-processing
this === each matched DOM 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);
  }
});

404 / network failure → status === "error"
#error shows status + statusText
#success may keep old content

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

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

data object present → POST
Server HTML inserted into the target
complete runs after insertion

Performance Notes

Fragment loads still download the whole remote document, then filter it. Prefer small server partials when you control the backend.

Key Takeaways