JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い

（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では動作しなかった。