async/defer 属性と DOM 構築

7. script with defer (IE fix)

実行結果

Hello World!

マークアップ

<p id="result">
    Hello
    <script src="X.js" defer></script>
    <script src="Y.js" defer></script>
    <script src="Z.js" defer></script>
    World!
</p>

DOM 要素とイベント

解説

H5BP コミュニティの Issue #42 では、IE9 以下で発生するバグの回避策がいくつか提案されていますが、どれも成功していないようです。

残念ながら jquery.jsjquery-ui.js のケースには適用できませんが(既に H5BP コミュニティーでは、これらのスクリプトに defer 属性を付けることを断念しています)、このデモでは直接 innerHTML に代入する代わりに、次のようにラッパーとなる要素に代入後、appendChild() を使うことで 先のバグ を回避しています。

var e = document.createElement('span');
e.innerHTML = 'X';
document.getElementById('result').appendChild(e);