javascript - jQuery脚本未加载，位于appendChild上

我正在使用此代码动态加载脚本文件，

<script type="text/javascript">
  var newscript = document.createElement('script');
  newscript.type = 'text/javascript';
  newscript.src = '../static/js/jquery.js';
  document.getElementsByClassName('container')[0].appendChild(newscript);

  var newscript = document.createElement('script');
  newscript.type = 'text/javascript';
  newscript.src = '../static/js/report_app.js';
  document.getElementsByClassName('container')[0].appendChild(newscript);

</script>

它会引发错误，

Reference error: $ is not defined

在report_app.js中。

我以为，在解析下一个文件jquery.js时，必须将report_app.js脚本加载到DOM中。

但是错误显示，没有执行jquery.js。如何确保在运行下一个脚本文件之前已加载该脚本文件？

最佳答案

这是因为脚本是异步添加的，因此可以使用onload回调

function addScript(path, callback) {
    var newscript = document.createElement('script');
    newscript.type = 'text/javascript';
    newscript.src = path;
    newscript.onload = callback;
    document.body.appendChild(newscript);

}

addScript('http://code.jquery.com/jquery-1.11.2.js', function () {
    addScript('../static/js/report_app.js');
})

演示:Fiddle