（2011/3/29追記：Firefox4の実行結果を追加）
JavaScriptによって動的にscript要素を追加する場合の、追加方法の違いによるブラウザごとの挙動を調べた。
調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）
<script>
function test(value) {
document.getElementById("test").value += value + ",";
}
window.onload = function() {
// innerHTMLに外部JSの読み込みを突っ込む
try {
var div1 = document.createElement("div");
div1.innerHTML = '<script src="test1.js"><' + '/script>';
document.body.appendChild(div1);
} catch(e) {
}
// createElementでscript要素を生成して外部JSを読み込む
try {
var script2 = document.createElement("script");
script2.src = "test2.js";
document.body.appendChild(script2);
} catch(e) {
}
// innerHTMLに生のJSを突っ込む
try {
var div3 = document.createElement("div");
div3.innerHTML = '<script>test(3);<' + '/script>';
document.body.appendChild(div3);
} catch(e) {
}
// createElementで生のJSを追加する
try {
var script4 = document.createElement("script");
script4.innerHTML = "test(4);";
document.body.appendChild(script4);
} catch(e) {
}
};
</script>
test1.js
test(1);
test2.js
test(2);
処理が実行されたら、表示用のテキストボックス（id="test"）に番号が表示される。
結果は下記の通り。
ブラウザ
| 1
| 2
| 3
| 4
| 表示順
|
IE 6/8
| Ｘ
| Ｏ
| Ｘ
| Ｘ
| 2
|
Firefox 3.6
| Ｏ
| Ｏ
| Ｏ
| Ｏ
| 1→2→3→4
|
Firefox 4.0
| Ｘ
| Ｏ
| Ｘ
| Ｏ
| 4→2
|
Chrome 4
| Ｘ
| Ｏ
| Ｘ
| Ｏ
| 4→2
|
Safari 4
| Ｘ
| Ｏ
| Ｘ
| Ｏ
| 4→2
|
Opera 10.53
| Ｘ
| Ｏ
| Ｘ
| Ｏ
| 2→4
|
innerHTMLにscript要素を入れるのはFirefox3.6以外では動かない。（セキュリティ的な施策？）
Firefoxでしか動作確認していないと嵌りそうだ。（というか嵌った。）
IEのことを考えると、生のcreateElementで生成したscript要素に生のJavaScriptを書くやり方も使えない。
（そんなことが必要になるケースは無いかもしれないが。）
素直にcreateElementで外部JSを読み込むのが良いようだ。
（2011/3/29 追記）
innerHTMLに生のJavaScriptを入れる方法として
innerHTMLでscriptする - Thousand Yearsの方法があったようだ。
しかし現在のブラウザでは、IE8では動作したが、Firefox4、Chrome10、Safari5、Opera11では動作しなかった。
投稿
