Javascript document.head、document.body以附加脚本

我经常使用并推荐这样的dom访问结构来动态地向页面添加内容：

loader = document.createElement('script');
loader.src = "myurl.js";
document.getElementsByTagName('head')[0].appendChild(loader);

现在，我偶然发现这在Google chrome中有效：

document.head.appendChild(loader);

再多调查一下，我发现这很有效，显然是跨浏览器的：

document.body.appendChild(loader);

所以我的主要问题是：有什么理由我不应该像这样把元素附在身体上

---

另外，您认为

document.head

会得到更广泛的支持吗

document.body

是DOM规范的一部分，我不明白为什么不使用它。但请注意：

在包含内容的文档中，返回元素；在框架集文档中，返回最外层的元素

（来自）

---

document.head

目前在任何DOM规范中都没有定义（显然我在这一点上是错的，请参见Daniel的回答），因此您通常应该避免使用它。

我看不出在实践中将

元素插入

或

元素有什么关系。从理论上讲，我想让运行时DOM与可能的静态DOM相似是件好事

---

至于

document.head

，它是HTML5的一部分，显然已经在所有主要浏览器的最新版本中实现了（请参阅）。

目前给出的答案集中在两个不同的方面，都非常有用

如果可移植性是您的一项要求，那么在您无法控制DOM一致性的非所有权文档中，检查是否存在必须将脚本附加到的元素可能会很有用；这样，在未显式创建HEAD部分时，它也会起作用：

var script = document.createElement('script');
var parent = document.getElementsByTagName('head').item(0) || document.documentElement;
parent.appendChild(script);

除了CORS策略和其他容易检测到的逻辑错误之外，我没有看到这个DOM操作任务会失败的情况，因此在我看来，检查

document.body

作为后备方案是不必要的

正如其他用户所概述的，

document.head

在发布问题时还没有得到广泛支持，因为它是HTML5规范，而

document.body

是，这就是为什么您看到后者在所有浏览器上都起作用

因此，您可以通过以下方式获得头部：

document.head || document.getElementsByTagName('head').item(0)

但我不认为它很有用，因为后者永远不会出错，并且是一个可读的标准DOM查询，除非您发现

document.head

从性能角度看更快

我能看到的关于这个表单的另一个可能的优势是代码从旧的JavaScript转换到更现代的HTML5兼容代码，简洁易读

如果兼容性是必须的，您可以使用库采用的技巧，这些技巧必须具备可移植性（例如，来自Google、Yandex和其他公司的解决方案）：

这样，在HEAD元素不存在而BODY（或另一个元素）不存在的情况下，您一定要将脚本附加到它

---

我还添加了一个有用的部分：当设置

src

属性时，脚本源的HTTP请求从浏览器发送，并将其附加到DOM中。无论以何种顺序满足这两个条件，这两个事件中的最后一个都会导致HTTP请求被调度。

我尝试实现这段代码，但遇到了一些问题，因此希望与大家分享我的经验

首先，我尝试了这个：

<script>
loader = document.createElement('script');
loader.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(loader);
</script>

无论我以何种方式在html文件中生成脚本，该代码都能正常工作

因此，我的窗口调整脚本不起作用，但视频内容起作用。因此，我想知道行为上的差异是否与“文档”对象有关。。。？可能“document”引用的是script.js文件而不是html文件

我不知道。我想我应该分享这个问题，以防它适用于其他人

---

干杯

查看Stoyan Stefanov所做的这一深入分析：请参阅关于类似问题的一篇文章，以获得更全面的选项比较。（即section/script.appendChild与section/script.insertBefore）如何添加样式表作为插件，您希望人们能够从位于头部的CSS中覆盖某些样式，而无需添加

！重要的

我知道这已经很晚了，但你真的很接近了。el=document.createElement（'script'）；el.src='script.js'；var parent=document.getElementsByTagName（'head'）。项（0）| | document.documentElement；父母、子女（el）；你为什么把你的问题作为回答-1那么您将这样做为什么不先检查

document.head

呢？确认此消息为真：

alert（document.head==document.getElementsByTagName（'head'）。项（0））

解释代码，您就有了最好的跨浏览器答案！从这一点上可以看出：

<script>
loader = document.createElement('script');
loader.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(loader);
</script>

// This javascript tries to include a special css doc in the html header if windowsize is smaller than my normal conditions.  
winWidth = document.etElementById() ? document.body.clientWidth : window.innerWidth; 
if(winWidth <= 1280) { document.write('<link rel="stylesheet" type="text/css" href="style/screen_less_1280x.css">'); } 

<script src="script.js"></script>

function OpenVideo(VideoSrcURL) {
window.location.href="#OpenModal";
document.getElementsByTagName('video')[0].src=VideoSrcURL;
document.getElementsByTagName('video')[0].play();}