In short, JQuery object method .load() loads a server resource (a specific url) asynchronously and inserts into a selected element. I have created a HTML page (https://www.ajax-tutor.com/demo/emma.html) which has five movies that Emma Stone (believe me, she is a great actress) has starred in.

Each movie is sectionized into each div element with the name of movie name as the ID of a div element.
<div id="Birdman">
.....
</div>

<div id="The-Help">
.....
</div>

We have seen earlier how easy is it to load a server resource by just a line of code. $('#div1').load('http://www.ajax-tutor.com/demo/data1.html');

What if you only want to display a portion of the loaded document, add a space to the URL and follow it with a JQuery selector. When the URL has loaded, the selector you specified will be used to select the portions of the loaded HTML to be displayed.

In this example, we want to show only the content of just one movie as what we've clicked from the left menu. When we click a movie title, the .load() will only "pick" the div section of that particular movie and insert into the content div on the right.

The code is simply $("#content").load('https://www.ajax-tutor.com/demo/emma.html #Birdman');

The HTML page structure

<!-- left menu START -->     
<div class="row">
    <div class="medium-2 columns panel">
        <ul class="side-nav">
            <li id="item-birdman"><a href="#">Birdman (2014)</a></li>
            <li id="item-the-help"><a href="#">The Help (2011)</a></li>
            <li id="item-spiderman"><a href="#">The Amazing Spider-Man 1&2 (2012/4)</a></li>
            <li id="item-magic"><a href="#">Magic in the Moonlight (2014)</a></li>
            <li id="item-crazy"><a href="#">Crazy, Stupid, Love. (2011)</a></li>
            <li id="item-all"><a href="#">all of them</a></li>                                 
        </ul>
    </div>
<!-- left menu END -->  
<!-- content START -->    
    <div id="content" class="medium-10 columns panel">
        <div class=" radius">CONTENT</div>
    </div>
</div>
<!-- content END -->   
                        

JQuery advocates Unobtrusive Javascript, it basically says the functional javascript should be separated from the page structure and my preference is to place Javascript code at the bottom of a page.

<script>
    $("#item-birdman").click(function() {$("#content").load('https://www.ajax-tutor.com/demo/emma.html #Birdman');});
    $("#item-the-help").click(function() {$("#content").load('https://www.ajax-tutor.com/demo/emma.html #The-Help');});
    $("#item-spiderman").click(function() {$("#content").load('https://www.ajax-tutor.com/demo/emma.html #Spiderman');});
    $("#item-magic").click(function() {$("#content").load('https://www.ajax-tutor.com/demo/emma.html #Magic-in-the-Moonlight');});
    $("#item-crazy").click(function() {$("#content").load('https://www.ajax-tutor.com/demo/emma.html #Crazy-Stupid-Love');});
    $("#item-all").click(function() {$("#content").load('https://www.ajax-tutor.com/demo/emma.html');});
</script>