When you want to insert a fragment of html in javascript, how will you do that? Here is an article from w3c for introduction. But some notes can impact the work we face to in daily development.
Script tag will not execute whether it is inlined or external linked. Say, you have code fragment:
var str = '<script>alert("well done!")</script>';
element.innerHTML = str;
Nothing will happen, the script code won’t execute. But style code escape from this rule, you can visit the jsbin demo for more information.
Another issue, if you have more than one script in your page, you get them download and executed one by one, such as demo, I set the blocking.php produce script and sleep 5 seconds, but the second script with simple code:
sleep(5);
header('Content-type', 'application/javascript');
echo 'alert(\'blocking.php loaded!\');';
alert('a.js loaded!');
As you expected, they loaded parallel(in Chrome and Firefox 3.0 after) and execute in order. But they will execute parallel when you use innerHTML.
var frag = document.createDocumentFragment();
var blockjs = document.createElement('script');
blockjs.src = 'http://localhost/jsbin/innerhtml/blocking.php';
var ajs = document.createElement('script');
ajs.src = 'http://localhost/jsbin/innerhtml/a.js';
frag.appendChild(blockjs);
frag.appendChild(ajs);
container.appendChild(frag);
Visit demo