如何使用 Javascript 将 CSS、META 等标签插入到 head 标签中？答案

【问题标题】：How can I insert CSS, META, etc. tags into the head tag using Javascript?如何使用 Javascript 将 CSS、META 等标签插入到 head 标签中？
【发布时间】：2012-07-20 18:43:52
【问题描述】：

我使用的托管 CMS 存在一个错误，不允许我将内容插入到 <head>。

我曾考虑过使用 Javascript 将所需的代码插入头部，但这样行吗？如果页面被读取<head> 然后<body> 如果头部已经被读取或者我误读了浏览器是如何工作的，那么使用javascript将代码放入头部是否重要？

如果您可以将内容放入页面的头部并且它适用于所有主流浏览器，那么 javascript 是什么？（我是 javascript 的新手。）

注意：我使用托管 CMS，并且没有访问任何服务器端脚本的权限。

编辑：

我需要添加CSS 和META 标签。

CSS 应该是这样的：

<style type="text/css">
 .slideshow img { display: none }
 .slideshow img.first { display: block }
</style>

META 可能如下所示：

<meta property="og:title" content="Title Text" />
<meta property="og:type" content="article" />
<meta property="og:url" content="URL Path" />
<meta property="og:image" content="IMG Path" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="620" />
<meta property="og:image:height" content="541" />
<meta property="og:site_name" content="My Site" />

这些是示例，但与我将要添加的内容相似。

【问题讨论】：

头部需要添加哪些元素？ CSS？ JavaScript？标题标签？元标记？
@JCOC611 谁会用JS来加JS？
@ColeJohnson - 很多人。大多数 JavaScript API 都会这样做。
@Derek 该死的你，比我快 2 秒。 +1
@JCOC611 - 我更新了问题以反映我将添加的内容，主要是 META 和 CSS 元素。

标签： javascript content-management-system head

【解决方案1】：

对于 CSS 脚本：

var ele = document.createElement("style");
ele.type = "text/css";
ele.innerHTML = "CSS CODE"; // Replace with CSS code.
document.head.appendChild(ele);

对于元标记（虽然我怀疑它会起作用，因为查看元标记的软件通常不执行 JavaScript 代码）：

var ele = document.createElement("meta");
ele.property = "propertyName"; //Replace with property name.
ele.content = "CSS CODE"; // Replace with content.
document.head.appendChild(ele);

【讨论】：

我相信您对meta 标签的看法可能是正确的。我尝试了 CSS 的方法，它在 FF 和 IE9 中工作，但在 IE 8 中中断。想法？
试试document.body.appendChild(ele);（用身体代替头部），看看它是否有效。
是的，但它可能也有效！无论如何，您可能想尝试的另一件事是更改您的 DOCTYPE 以在兼容模式下触发 IE8。
我为 IE8 及以下版本添加了 IE 条件注释（在 body 标签内）。对于所有其他浏览器，我使用上面的 JS。谢谢！

【解决方案2】：

var ele = document.createElement("script");  //Tag name
ele.src = "your_link.js";                    //URL
document.head.appendChild(ele);              //Insert into <head>
                                             //Done.

【讨论】：

谢谢，我会试试看会发生什么。如果我想像我的问题一样使用 CSS，还有一个问题（我更新了它，因为你的回答 => ）我将如何添加它？
@Lynda - 看看 JCOC611 的答案，它回答了你所有的问题。 ;) 顺便说一句，你应该使用 jQuery，它在添加元素和操作 DOM 方面超级方便。
我确实在我的网站上使用 jQuery，并且对 jQuery 解决方案完全开放。 =>