使用 javascript 将脚本附加到头部 - 奇怪的行为答案

【问题标题】：Appending scripts to head using javascript - weird behavior使用 javascript 将脚本附加到头部 - 奇怪的行为
【发布时间】：2011-07-22 19:14:54
【问题描述】：

我要解决的问题是一个广告加载脚本，它使用 jsonp 加载广告代码并将其插入到 dom 中。

现在有时广告代码会包含 javascript 标记，我认为只需将它们移动到 head 部分，它们就会运行。理论上可以正常工作，但是当我编写脚本将脚本标签移动到头部时，我遇到了一些奇怪的行为。

所以我写了这段代码来测试脚本的移动部分，消除了其余代码作为错误源。

我得到相同的结果，如果我在 div 中只有两个脚本，它会移动其中一个，如果我有 3 个脚本，它会移动其中 2 个。在下面粘贴的代码中，它移动了脚本 1 和 3，跳过了远程 javascript 引用和最后一个脚本标签。

至少知道为什么会发生这种情况以及是否可以解决会很有趣。

编辑：澄清一件事，如果我将远程 jquery 脚本放在第一位，然后将一个简单的脚本标签放在第二位，它将把远程脚本标签移到头部并跳过第二个脚本标签。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// get div id
function test() {
var td = document.getElementById('testId');
var scripts = td.getElementsByTagName("script");
console.log("No. of scripts to transfer to head: "+scripts.length);
for(i=0;i<scripts.length;i++) {
    var curScript = scripts[i];
    document.head.appendChild(curScript);
}   
}
</script>
</head>
<body onload="test();">
<div id="testId">
    <script type="text/javascript">var firstScript = 1;</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">var secondScript = 1;</script>
    <script type="text/javascript">var thirdScript = 1;</script>
</div>
</body>
</html>

【问题讨论】：

标签： javascript append head appendchild

【解决方案1】：

你在一个错误的假设下工作：script 元素是否在head 或body 中都无关紧要，无论如何它们都会运行。在它们被附加到 DOM 之后移动它们充其量是没有意义的，最坏的情况是如果脚本在移动时重新运行（但我认为不会），最坏的情况可能会导致不幸的副作用。

至于为什么你会看到你所看到的行为，那是因为getElementsByTagName 返回了一个live NodeList。当您移动脚本时，它会从 NodeList 中删除。所以给定你的四个脚本，你会得到一个最初包含四个元素的NodeList，所以.length 是4，[0] 是你的第一个脚本。当您将该脚本移出 div 时，NodeList 会更新，因为该脚本不再位于 div 中，因此它的长度现在是 3 和 [0] 指的是您的第二个脚本（第加载 jQuery）。

您可以通过两种方式避免这种行为中断您的循环：

向后循环，从.length - 1 到0（含），或
将NodeList 变成一个数组，这样元素就不会从您下方移出。

【讨论】：

谢谢！你是对的，但是插入到 DOM 中的 javascript 在插入到 div 或移动到头部时不会运行。
@user：如果你将一个实际的script 元素插入到 DOM 中，它包含的脚本会立即运行。如果您没有看到这种行为，我建议您提出一个单独的问题（因为这个问题更多的是关于为什么循环提前结束）显示您在做什么并询问您为什么没有得到您期望的结果。最好的，
谢谢，我现在正在为一个新问题设置一个示例。