Question

我经常使用并看到推荐的dom-access结构，用于动态地向页面添加内容：

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

现在，我偶然发现这适用于Google Chrome：

document.head.appendChild(loader);

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

document.body.appendChild(loader);

所以我的主要问题是：我有什么理由不应该像这样将元素附加到BODY上吗？

另外，您认为document.head会得到更广泛的支持吗？

Answer 1

在实践中，您是否有任何理由将<script>元素插入<head>或<body>元素。从理论上讲，我认为让运行时DOM类似于可能的静态DOM是很好的。

至于document.head，它是HTML5的一部分，显然已在所有主流浏览器的最新版本中实现（请参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-head）。

Answer 2

document.body是DOM规范的一部分，我不明白为什么不使用它。但要注意这一点：

在包含内容的文档中，返回元素，在frameset文档中，这将返回最外层的元素。

（来自https://developer.mozilla.org/en/DOM/document.body）

document.head ~~目前未在任何DOM规范中定义~~（显然我错了，请参阅Daniel的回答），所以通常应该避免使用它

Answer 3

有关类似问题的详细信息，请参阅my answer。（即section / script.appendChild与section / script.insertBefore）

Answer 4

我尝试实现此代码并遇到了一些麻烦，所以想分享我的经验。

首先我尝试了这个：

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

在script.js文件中，我有以下代码：

// 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>

这对我有用，所以问题现在解决了，但我想了解这两种方法之间的区别。为什么一个工作而另一个工作？

更多的是在script.js中我还有代码如：

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

无论我在html文件中使用哪种方式来源代码，代码都能正常工作。

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

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

干杯。

Answer 5

现在给出的答案集中在两个不同的方面，并且非常有用。

如果您需要可移植性，则在您无法控制DOM一致性的非您所有权的文档中，检查是否存在必须附加脚本的元素可能很有用;这样，当未明确创建HEAD部分时，它也会起作用：

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

document.head，document.body附加脚本

5 个答案: