Question

I am using jQuery’s load function to get template data from external html files. In most cases I prefer to storage the data in a variable and append it when I need to later on. For example, I may end up cloning the node several times, or appending other data to it etc etc. The point is I need to be able to load an element from an external file, but not append it to an existing document.

What I am doing now is simple:

var storage = document.createElement('div');
$(storage).load('somehtmlfile.html #sampleTemplateDiv');

But its annoying to have to remove the html from inside the storage div every single time. It would be nice if I could do something similar without having to append to a redundant container div and I could just have the data from the html file waiting nicely in the storage variable. Is this possible?

A non-jquery solution would be perfectly acceptable.

Answer 1

My solution was to use .ajax instead of .load and to temporarily store the data in the storage div, the extract it and return the element. I am using this inside an external function as well, so it was appropriate to make this a synchronous call…unfortunately or I wouldn’t be able to properly return the element.

var ret = null;
$.ajax({
    url: url,
    async: false,
    success: function(data) {
        var storage = document.createElement('div');
        storage.innerHTML = data;
        var template = $(storage).find('#' + id);
        if(template.length > 0) ret = template[0];
    }
});
return ret;