Can you "nest "JQuery loading of HTML content?

user_10872496 0
Viewed 37

Is it possible to "nest" content from multiple HTML files with JQuery.load() ?

I want to be able to have all the HTML content in the top level "content" div.
My code example looks like this:


load.js - "firstLayer" loaded into "content" div

$(function () {
    $('#content').load('/first.html #firstLayer', true)
    $('#firstLayerContent').load('/second.html #secondLayer', true)
})

first.html

<div id="firstLayer">
    <div id="firstLayerContent"></div>
</div>

second.html

<div id="secondLayer">
    <p style="font-size: 100px;">Hello world</p>
</div>
load nested html jquery javascript
1 Answers

Yes, you can**. You just need to ensure that the second load() call executes after the first so that the #firstLayerContent element is guaranteed to exist at the point you try to put content within it. To do that use the callback argument:

jQuery($ => {
  $('#content').load('/first.html #firstLayer', () => {
    $('#firstLayerContent').load('/second.html #secondLayer');
  });
})

** But be very careful with this pattern, as you can easily cause a drain on server resources by making lots of small requests for partial data. In nearly all cases it's more performant to make a single, larger request which retrieves all required data from the server and process it on the client.

user_5194130
Related