? jQuery `.load()` Method

? Quick Overview

The .load() method loads data from a server and places the returned HTML into the matched element.

? Key Concepts

Uses AJAX internally to fetch remote content
Replaces the inner HTML of a selected element
Supports callbacks for success and error handling

? Syntax / Theory

? View Code Example

// Basic syntax of jQuery load method
$('#element').load('url',[data],[callback]);

? Parameters

url: The URL to load HTML from.
data: Optional key/value pairs sent to the server.
callback: Optional function executed after loading completes.

? Live Example

Click the button to load content here.

? Code Example

? View Code Example

// Load external content into #result on button click
$('#loadBtn').click(function(){
$('#result').load('https://jsonplaceholder.typicode.com/posts/1',function(response,status,xhr){
// Handle error case if request fails
if(status=='error'){
$('#result').text('Error: '+xhr.status+' '+xhr.statusText);
}
});
});

? Live Output / Explanation

.load() performs an AJAX GET request.
The returned content replaces the existing HTML.
The callback provides status and error details.

? Interactive Example

Post ID (1-100): Load Part:

Change the settings and click 'Fetch Data' to see it in action!

? Use Cases

Loading reusable page sections like headers or footers
Fetching content dynamically on user interaction
Creating single-page style experiences

✅ Tips & Best Practices

Use same-domain URLs to avoid CORS issues.
Always include error handling in callbacks.
You can load partial HTML using selectors.

? Try It Yourself

Change the URL to load different posts.
Pass data using the optional parameter.
Combine .load() with animations.

jQuery .load() Method

? jQuery .load() Method