如何通过 jquery/javascript 在 <head> 中添加任何内容？答案

【问题标题】：How to add anything in <head> through jquery/javascript?如何通过 jquery/javascript 在 <head> 中添加任何内容？
【发布时间】：2010-12-26 10:21:05
【问题描述】：

我正在使用 CMS，它阻止编辑 <head> 元素的 HTML 源代码。

例如我想在<title>标签上方添加以下内容：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

【问题讨论】：

这没有意义... 在执行 javascript 之前解析头部。通过 javascript 将 meta stuf 添加到头部不会产生预期的效果。
@Mickel - 是的。所有问题的答案都对我有帮助
虽然与 CMS 问题无关，但在某些情况下添加元标记是有意义的。有各种浏览器插件和 javascript 注入使用元标记中的数据来收集信息。 Facebook 的 OpenGraph 就是一个例子。当您无法直接访问原始 HTML 时，需要将元标记注入头部，无论是由于 CMS 的错误还是因为您自己编写了一个 javascript 插件/注入。
请注意，动态添加<meta> 标签可能无效，具体取决于它们是什么以及所涉及的浏览器。
好点，当人们过分关注问题时会发生这种情况;-)

标签： javascript jquery css xhtml

【解决方案1】：

您可以正常选择并添加：

$('head').append('<link />');

【讨论】：

我如何控制订单，这个链接将放置在哪里
阅读文档：docs.jquery.com/ManipulationinsertBefore，insertAfter 就是你想要的。
我已经把它放在了 document.ready 中，但它并没有附加到我的头部内容中
它正在添加链接，但链接未显示在页面视图源中...我可以从 Firebug 等浏览器开发工具中查看它。我也可以在视图源中查看链接吗？
@PankajTiwari 您不会在源视图中看到它，因为代码会将其附加到当前文档，而不是原始源（由服务器提供）。这就是 FireBug 和 Chrome 开发工具如此有用的原因。

【解决方案2】：

JavaScript：

document.getElementsByTagName('head')[0].appendChild( ... );

像这样制作 DOM 元素：

link=document.createElement('link');
link.href='href';
link.rel='rel';

document.getElementsByTagName('head')[0].appendChild(link);

【讨论】：

适用于脚本元素！

【解决方案3】：

jQuery

$('head').append( ... );

JavaScript：

document.getElementsByTagName('head')[0].appendChild( ... );

【讨论】：

不 appendChild 需要 DOM 元素？ IE。 var elem = document.createElement() document.getElementsByTagName('head')[0].appendChild( elem );
好吧。我只是将那部分留为...，因为我觉得这不是问题的核心部分，而且，在撰写本文时，没有关于他想要放在头脑中的实际例子。但是是的，它确实需要是一个 DOM 元素。

【解决方案4】：

您可以使用innerHTML 来连接额外的字段字符串；

document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'

但是，您不能保证在第一次加载后浏览器会识别您添加到头部的额外内容，并且您可能会在加载额外的样式表时获得 FOUC（无样式内容的闪存） .

我已经很多年没有看过 API，但您也可以使用 document.write，这是为此类操作而设计的。但是，这将要求您在完成初始 AJAX 请求之前阻止页面呈现。

【讨论】：

你也可以使用document.head.innerHTML += '<link rel="stylesheet>...' 只是你的代码的短代码

【解决方案5】：

在最新的浏览器（IE9+）中也可以使用document.head：

示例：

var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';

document.head.appendChild(favicon);

【讨论】：

【解决方案6】：

创建一个临时元素（例如DIV），将您的HTML代码分配给它的innerHTML属性，然后将其子节点一一附加到HEAD元素.例如，像这样：

var temp = document.createElement('div');

temp.innerHTML = '<link rel="stylesheet" href="example.css" />'
               + '<script src="foobar.js"><\/script> ';

var head = document.head;

while (temp.firstChild) {
    head.appendChild(temp.firstChild);
}

与通过innerHTML 重写整个HEAD 内容相比，这不会以任何方式影响HEAD 元素的现有子元素。

请注意，以这种方式插入的脚本显然不会自动执行，而样式会成功应用。所以如果你需要执行脚本，你应该使用Ajax加载JS文件，然后使用eval()执行它们的内容。

【讨论】：

这就是我在body 中的做法，但真的可以在head-tag 中做到吗？我的印象是，只有base、link、meta、title、style 和 script 是允许的标签？
AFAICT，您的 Ajax 响应中有这些元素。不是吗？
确实如此，但我仍然无法使其与 head 标签内的 div 一起使用。看起来 Chrome 足够“智能”，无论如何都可以在正文中显示 div 的内容。
您可能没有仔细阅读答案。 ;-) DIV 元素只是一个临时容器，用于解析 HTML 代码。您不应将DIV 本身插入HEAD。您应该插入它的子节点。请参阅我添加到答案中的示例。
@GaetanL。 “虽然temp 元素中有子元素。”请参阅Node.firstChild() docs。

【解决方案7】：

试试纯javascript：

库 JS：

appendHtml = function(element, html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    while (div.children.length > 0) {
        element.appendChild(div.children[0]);
    }
}

类型： appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');

或 jQuery：

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));

【讨论】：

【解决方案8】：

使用 jquery，您还有其他选择：

$('head').html($('head').html() + '...');

无论如何它正在工作。其他人说的 JavaScript 选项，那也是正确的。

【讨论】：

这将删除现有内容并生成新元素。这可能会产生不良副作用，例如丢失动态设置的 DOM 属性并导致重新执行脚本。
因此你应该在 $('head').html() 之前使用来恢复所有的 DOM 属性
使用.html() 不会恢复所有 DOM 属性。（这个问题最常见的，也是最明显的，是在使用类似的代码向表单添加新字段时。value属性表示字段的默认值，因此获取html()然后将其设置回来将重置所有现有字段的默认值）。
我可以肯定你我在我的代码中测试了它并且它正在工作并且所有 DOM 属性都工作。请你自己测试一下，我用的是IE11
可以删除的东西也是事件。