如何使用 jQuery 将 html 附加到 <head>
Posted
技术标签:
【中文标题】如何使用 jQuery 将 html 附加到 <head>【英文标题】：How to append html to <head> with jQuery 【发布时间】：2011-03-09 15:51:37 【问题描述】：我正在尝试将 Facebook 打开图形标签（基于页面上动态生成的内容）附加到我的 html 的头部。
$(document).ready(function()
var stat = $('#random-message').text();
stat = jQuery.trim(stat);
//set facebook Open Graph description
$('head').append('<meta property="og:description" content="'+stat+'"/>');
);
这本身就可以正常工作。 js fiddle
当我将它与动态加载的 Twitter 脚本（如下）结合使用时
$(document).ready(function()
var stat = $('#random-message').text();
stat = jQuery.trim(stat);
//set tweet button data text
$('a.twitter-share-button').attr('data-text',stat);
//set facebook Open Graph description
$('head').append('<meta property="og:description" content="'+stat+'"/>');
//insert twitter API Script - problematic
$('#tweet-like').append('<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>');
);
它摇摇晃晃。 js fiddle 在 js fiddle 中，它在正文中插入了一些特殊字符，脚本的其余部分（包括插入元标记）都不起作用。奇怪，因为 Twitter 脚本“widgets.js”正在我的页面上运行，但元标记没有出现。
【问题讨论】：
类似问题here head 只是另一个标签，append 应该没有问题 请问为什么需要在页面加载后附加这个？当 facebook 最初在 head 中查找 meta 标签但没有找到时，如果您在此之后加载它，它就不会重要了吗？ 确认在 Firefox 3.6 和 Chrome 10 (jQuery 1.5.1) 上工作 :) 它主要是为了一个like按钮，所以至少为了这个目的，它不需要在文档准备好之前加载。 【参考方案1】：Facebook 不使用当前页面中的元标记，它重新请求页面并对其进行解析。由于该解析不涉及在页面中运行任何 Javascript，因此不会将元标记添加到读取的数据中。
要使元标记工作，它必须从一开始就存在于页面中，不能使用客户端脚本添加。
【讨论】：
***.com/a/34284383/470749 似乎同意不会解析客户端（通过 javascript）更改的 Open Graph 标签。以上是关于如何使用 jQuery 将 html 附加到 <head>的主要内容，如果未能解决你的问题，请参考以下文章
如何将类添加到已经在 jQuery 中调用容器 div 的附加变量
将 html 附加到 jQuery 元素而不在 html 中运行脚本
如何使用 Jquery 或 Javascript 定位附加元素，或者如何将该附加元素添加到 DOM？