Question

I am using jQuery 1.6.2.

In a master page, I open up several divs that will later be populated with info through the use of buttons:

<input type="button" id="ButtonOne">
<input type="button" id="ButtonTwo">
<input type="button" id="ButtonThree">
<div class="SectionDiv" id="DivOne"></div>
<div class="SectionDiv" id="DivTwo"></div>
<div class="SectionDiv" id="DivThree"></div>

I make a call to populate the divs like this:

$("#ButtonOne").click(function() {
    $("#DivOne").load("FileOne.html");
});

When I popule a div, I want to get rid of everything in the other divs. I have done this two different ways. Like this:

// METHOD ONE
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").load("BlankPage.html");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

// METHOD TWO
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").html("");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

In method one, I load the div with a page that has no content, a completely empty page. In method two, I use html(“”) with the same effect(?).

While these two methods have the same visual outcome, does one have a distinct advantage over the other for killing existing variables in the divs, or detaching elements better from the DOM, or anything? Is one faster in certain environments than the other? Does one hog more resources than the other?

Answer 1

Method one causes a request to get the blank page for no reason (because you know it is blank, there is no need for a request). So essentially method two is the optimized version of method one because it saves the useless additional HTTP requests.