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

102

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

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

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

— Jitendra Vyas
source

8

这没有意义...在执行javascript之前解析了head。通过javascript将meta stuf添加到头部不会达到预期的效果。

— 2009年

1

@Mickel-是的。所有问题的答案对我都有帮助

— Jitendra Vyas 2009年

2

尽管与CMS问题无关，但在某些情况下添加元标记可能很有意义。有各种浏览器插件和javascript注入，它们使用meta标记中的数据来收集信息。Facebook的OpenGraph就是一个例子。当您无权直接访问原始HTML时，无论是CMS的故障还是您自己编写javascript插件/注入，都需要将meta标签注入头部。

— conceptDawg

请注意<meta>，根据标签的种类和所涉及的浏览器，动态添加标签可能不会起作用。

— 尖尖的2016年

好的一点是，当人们过多地关注问题时，就会发生这种情况;-)

— mb897038

149

您可以选择它并像往常一样添加到它：

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

— 尼克
source

2

我如何控制订单，将放置此链接的位置

— Jitendra Vyas 2009年

7

阅读文档：docs.jquery.com/Manipulation insertBefore，insertAfter就是您想要的。

— 尼克

3

我已经将其放在document.ready中，但是它没有附加到我的头部内容

— serpent403

它正在添加链接，但链接未显示在页面视图的源中...我可以从Firebug等浏览器开发工具中查看它。我也可以在查看源代码中查看链接吗？

— Pankaj Tiwari 2012年

4

@PankajTiwari您不会在源视图中看到它，因为代码会将其附加到当前文档中，而不是原始源（由服务器提供）。这就是FireBug和Chrome Dev工具如此有用的原因。

— 2013年

129

JavaScript：

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

使DOM元素如下所示：

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

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

— 约书亚·伍德沃德（Joshua Woodward）
source

1

使用脚本元素！

— 雷·福斯

26

jQuery的

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

JavaScript：

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

— 戴维·赫德伦德
source

5

appendChild是否不需要DOM元素？即。var elem = document.createElement（）document.getElementsByTagName（'head'）[0] .appendChild（elem）;

— fredrik

2

嗯，是。我...之所以离开这部分，是因为我不认为那是问题的中心部分，而且在撰写本文时，还没有关于他想表达什么的实际例子。但是是的，它确实必须是DOM元素。

— David Hedlund

10

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

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

但是，您不能保证在第一次加载后，添加到头部的多余内容将被浏览器识别，并且在加载额外的样式表时，您可能会得到FOUC（未样式化内容的闪烁）。

多年以来我都没有看过API，但是您也可以使用document.write，这是针对此类操作而设计的。但是，这将需要您阻止页面呈现，直到您的初始AJAX请求完成。

— 吉文斯
source

9

在最新的浏览器（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);

— 本尼·纽格鲍尔
source

9

创建一个临时元素（例如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);
}

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

请注意，虽然成功应用了样式，但是显然不会自动执行以这种方式插入的脚本。因此，如果需要执行脚本，则应使用Ajax加载JS文件，然后使用来执行其内容eval()。

— 马拉·塔纳林
source

这就是我在中做的方法body，但是实际上可以在head-tag中完成吗？我的印象是，只允许标签，其中下base，link，meta，title，style和script？

— mb897038's

AFAICT，您在Ajax响应中完全包含那些元素。是不是

— Marat Tanalin

确实，但是我仍然无法使其与head标签内的div一起使用。Chrome似乎足够“聪明”，无论如何仍可以在主体中显示div的内容。

— mb897038's

2

您可能没有仔细阅读答案。;-) DIV元素只是用于解析HTML代码的临时容器。您不应该将DIV自身插入HEAD。您应该插入其子节点。请参阅我添加到答案中的示例。

— Marat Tanalin '16

1

@GaetanL。“虽然元素内有子元素temp。” 请参阅Node.firstChild（）文档。

— Marat Tanalin

4

尝试使用纯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'));

— 劲霸
source

-5

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

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

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

— 戴夫
source

2

这将删除现有内容并生成新元素。这可能会带来不良后果，例如丢失动态设置的DOM属性并导致脚本重新执行。

— 昆汀

因此，您应该在$（'head'）。html（）之前使用以恢复所有DOM属性

— Dave 2013年

1

使用.html()不会恢复所有 DOM属性。（此问题的最常见实例，也是最明显的实例，是在使用类似代码向表单中添加新字段时。value属性表示字段的默认值，因此先获取html()然后将其重新设置将重置所有现有字段。字段恢复为默认值）。

— Quentin

我可以确定您已经在代码中对其进行了测试，并且可以正常工作，并且所有DOM属性都可以正常工作。请测试一下，我正在使用IE11

— Dave

也可以删除的事件也是事件。

— Hydroper