Hire Me! I'm currently looking for my next role in developer relations and advocacy. If you've got an open role and think I'd be a fit, please reach out. You can also find me on LinkedIn.

Forgive the somewhat awkward title. Hopefully an explanation will make things a bit clearer. I was working on an application yesterday that needed to load in a HTML file via AJAX and display it on screen. The HTML happened to be documentation so I was going to simply display it as is on screen. Since I wasn't doing any processing, my code was very simple:

$(document).on("click", ".keyword", function(e) {
e.preventDefault();
var url = $(this).data("url");
$("#displayHelp").load("docs/"+url);
});
view raw gistfile1.js hosted with ❤ by GitHub

Easy, right? Well, the first thing I discovered was that the HTML I was loading included things I didn't want - headers, footers, etc. Again though this is easy enough to handle. You can tell jQuery's load() function to filter down to a DOM item. (As a reminder - if you are concerned about performance don't forget that you are still asking jQuery to load N bytes of HTML even though you are using <N bytes in the display.)

$(document).on("click", ".keyword", function(e) {
e.preventDefault();
var url = $(this).data("url");
$("#displayHelp").load("docs/"+url+" #docs");
});
view raw gistfile1.js hosted with ❤ by GitHub

Woot. Almost there. This worked great, but the "block" of HTML this rendered was missing a nice header on top. I went back to the original source HTML and discovered that there was another div, header, that contained the title and would be perfect.

But here was a problem. How do I tell the load() function to select two DOM items? Turns out this was easy as well - just provide a list:

$(document).on("click", ".keyword", function(e) {
e.preventDefault();
var url = $(this).data("url");
$("#displayHelp").load("docs/"+url+" #header, #docs");
});
view raw gistfile1.js hosted with ❤ by GitHub

This worked fine. But this leads to my question. Is this a good idea? Is there a better way? (Assuming you can't get "pure" data and must work with the HTML files.)