使用 jquery 注入 HTML 和 CSS，但将 CSS 放在单独的文件中？答案

【问题标题】：Inject HTML and CSS using jquery but have the CSS in a separate file?使用 jquery 注入 HTML 和 CSS，但将 CSS 放在单独的文件中？
【发布时间】：2011-04-29 22:35:17
【问题描述】：

我正在构建一些东西，它将通过托管在我的服务器上的 Jquery 将 HTML 注入用户网站（他们只是会像其他 Javascript 一样包含我的脚本）。

所以我有我的 HTML 注入；如何不使用注入的 HTML 编写内联样式 CSS？

我唯一的想法是在我的 Jquery 开头向我的服务器查询这个外部 javascript 文件。不过，我不确定如何使 CSS 和 Jquery 对用户的浏览器可用。

有什么想法吗？我正在做类似下面的事情，仅供参考。

$(document).ready(function() {
$('body').find(":last").after("
<div class='spacer'></div><div id='nav_menu_wrapper'><div class='nav_menu'>");
});

【问题讨论】：

标签： jquery html css dom code-injection

【解决方案1】：

您可以使用 jQuery 注入一个 <link> 标记，其中 href 指向您提供脚本的任何位置：

$('head').append(
    $('<link/>', {href: '//path.to/your/stylesheet.css', rel: 'stylesheet'})
);

【讨论】：

【解决方案2】：

您可以在 head 上附加 CSS。

$("<link />").attr({ "href": "link",
    "rel": "stylesheet",
    "type": "text/css" })
    .appendTo("head");

或者提出请求并创建一个style 标签。

$.get("/static/default.css", function(d)
{
    $("<style />").html(d).appendTo("head");
})

至于附加html，您可以创建$.get 并附加或使用iframe。

【讨论】：