import.js で if文を使いたい

Question

import.jsの中身は下記のとおりです。

window.onload = function () {
if(val>0){
document.write ( '<script type="text/javascript" src="hoge.js"></script>' );
}
}
document.write ( '<script type="text/javascript" src="fuga.js"></script>' );
document.write ( '<script type="text/javascript" src="piyo.js"></script>' );

val=1の場合は
hoge.js
fuga.js
piyo.js
0の場合は
fuga.js
piyo.js
を読ませたいですが。
なぜかHTMLが空っぽになってしまいます。
正しい書き方を教えて下さい。

Answer 1

document.write はDOM構築完了前に呼び出されれば既存DOMに追記しますが、document が close された後に呼び出すと既存DOM を上書きします。
この場合は appendChild() を使うのがお勧めです。

'use strict';
function createScript (doc, src) {
  var script = doc.createElement('script');
  script.src = src;

  return script;
}

document.addEventListener('DOMContentLoaded', function (event) {
  var files = ['hoge.js', 'fuga.js', 'piyo.js'];

  for (var i = 0, l = files.length, doc = event.target, body = doc.body; i < l; ++i) {
    body.appendChild(createScript(doc, files[i]));
  }
}, false);

Re: rainbowsix さん

Answer 2

カラッポになってしまう、というのは、
表示されたHTML上で「右クリック → ページのソースを表示」としていませんか？
それだと、document.write()で追加されたものは表示されません。

chromeのディベロッパーツールなど、ブラウザについている開発者用の機能などで見ることが出来ますよ。

参考：
JavaScript実行結果として出力されたHTMLソースを見る

---

追記

document.write()のタイミングで真っ白になることがあるようです。
→ document.writeがイベントタイミングによって挙動が違う

Comments

[rainbowsix]

「右クリック → ページのソースを表示」でコードは見れますが。表示画面が真っ白になっている状態です。

[kaputaros]

回答に追記しました。