如何在Javascript中首先附加子负载？答案

【问题标题】：How to append child load first in Javascript?如何在Javascript中首先附加子负载？
【发布时间】：2013-07-30 07:22:40
【问题描述】：

我想在<head>标签的第一个动态添加js文件。我的文件如下所示

示例链接：Link

代码

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript">
        function load() {
        var doc = document;
        var url = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
        var id =  1;
        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.id = id;
        //alert(script);
        var head = doc.getElementsByTagName( "head" )[ 0 ].appendChild( script );

        }
         window.onload = load;

        </script>   
<title>Nathan</title>
<style>
table{
    width:200px;
    margin:0 auto;
    background-color:#eee;
    text-align:center;
    cursor:pointer;
}
th{
    background-color:#333;
    color:#FFF;
}
div#lyrics{
    width:200px;
    height:400px;
    background-color:#7C8698;
    position:absolute;
    left:500px;
    padding:10px;

}
</style>
<script type="text/javascript">

$(document).ready(function(){

    $("div#lyrics").hide();

    $("#songlist tr").mouseover(function(){
        $(this).css("background-color","#ccc");
        $("#lyrics",this).show();
    }).mouseout(function(){
        $(this).css("background-color","#eee");
        $("#lyrics",this).hide();
    });

});
</script>

</head>

<body>
    <table id="songlist">
        <th>Songs</th>
        <tr><td>song1<div id="lyrics">la la la song1</div></td></tr>
        <tr><td>song2<div id="lyrics">doo doo doo song2</div></td></tr>
        <tr><td>song3<div id="lyrics">fee fi fo fum song3</div></td></tr>
        <tr><td>song4<div id="lyrics">hmm hmmm song 4</div></td></tr>
        <tr><td>song5<div id="lyrics">ma ma mi mi song5</div></td></tr>
        </tr>
    </table>
</body>
</html>

动态脚本添加成功，但添加了最后一个 head 标签。所以我的 jquery 函数不起作用。所以请告诉我如何在 head 标签的第一个加载我的动态脚本

【问题讨论】：

只是出于好奇，为什么不直接在<script/> 标签中添加jQuery 而不是这样做呢？
@putvande 不，我正在创建一个浏览器插件，所以我只需要使用 javascipt 加载 jquery 文件

标签： javascript jquery html append appendchild

【解决方案1】：

使用.insertBefore() 和.firstChild 而不是.appendChild()

【讨论】：

或者可能存在一个函数“prependChild()”，但我不确定。
@Virus721 不，这很奇怪。

【解决方案2】：

在head部分先添加jQuery还是不行，因为对源文件的请求会异步，你为什么不像普通的脚本标签一样添加jQuery：

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script>/*jQuery dependent code*/</script>
  ...

如果您将/必须使用异步加载，则必须等待脚本加载后才能添加任何 jQuery 相关代码：

<script> // Pseudo code: (Take a look at http://www.ejeliot.com/blog/109 for more complex solution)
  var script = document.createElement('script');
  script.onload = init;
  script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js';
  document.body.appendChild(script);
</script>

<script>
  function init() { /* now jQuery is loaded */ }
</script>

【讨论】：

我正在创建一个浏览器插件，所以我只需要使用 javascipt 加载 jquery 文件。
@NathanSrivi 你看到第二部分了吗？

【解决方案3】：

当您编写代码时，第二个脚本标记中的内容在加载 jQuery 之前运行。当时没有定义“$”。

window.onload = load;

表示您将内容放在加载函数中以在“onload”处运行。但显然，脚本标签中的内容已经在运行。直到已经定义的脚本标签中的所有脚本都被执行后，定义的“加载”函数才会被执行。

当然，实际下载文件需要一些时间。

如果您必须异步加载 jQuery，您还必须将所有依赖于 jQuery 的 JavaScript 放入某个回调中，该回调只有在 jQuery 成功加载后才会执行。

【讨论】：

@NULL 给出了一个很好的答案，展示了如何将所有依赖于 jQuery 的 JavaScript 放入回调中。