Jquery .load and inner jquery .append

Question

Ive just started using jquery for the .load ajax functionality. When i load an external page to a specific div it loads fine. inside the external page there is an .append that .appends javascript to the head. This works on the initial load but when i use .load to load it this portion is not showing.

//This is the .load for the div
function loadContent(elementSelector, sourceUrl) {

 url = ""+sourceUrl+"";
$(""+elementSelector+"").load(url);
 alert(url);

}

//This is the append in the other page that is embedded in a js 

var cUrl = "http://intensedebate.com/js/genericCommentWrapper2.php?acct="+idcomments_acct+"&postid="+idcomments_post_id+"&title="+idcomments_post_title+"&url="+idcomments_post_url;
alert(cUrl);


commentScript.type = "text/javascript";
commentScript.src = cUrl;

$('head').append(commentScript);

EDIT: The alert(cUrl) runs every time. But the head append isnt rendering.

Why on earth are you concatenating empty strings? – SLaks Jun 08 '10 at 15:46 — SLaks, Jun 08 '10 at 15:46
LOL I got that code off of the interwebs. – speekeazy Jun 08 '10 at 20:25 — speekeazy, Jun 08 '10 at 20:25

score 1 · Answer 1 · edited May 23 '17 at 12:13

jQuery uses the innerHTML property to append loaded HTML via the .load() method:

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document was retrieved directly by the browser.

Scripts cannot be inserted using .innerHTML (at least, not in a cross-browser compatible manner), which is why your .load() will not execute your script appending script.

Jquery .load and inner jquery .append

1 Answers1