在可嵌入javascript代码中添加对标头的引用

我使用HTML、Javascript、JQuery和CSS创建了一个简单的计算器应用程序。我希望其他人能够在自己的页面中嵌入计算器应用程序——也就是说，我创建了一个名为generate.js的文件

这个文件的内容几乎是一堆document.write（）命令，这些命令可以输出计算器所用的HTML代码。但是，我有几个外部源托管在我自己的服务器上（一些图像、库等）

document.write（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；

这就是我想出来的，但问题是这段代码被附加到了正文中，这是一种糟糕的做法

我以前从未做过类似的事情-有没有一种有效/干净的方法来访问文档的标题并将这些行附加到文档中？我是不是走错了路

---

另外，我故意不想将iframe用于SEO目的。非常感谢您的帮助/指点…

在大多数最新浏览器中，这只是在头部添加了一个链接元素

var bootstrapCss = document.createElement('link');

bootstrapCss.rel = 'stylesheet';
bootstrapCss.href = 'http://website.com/config/bootstrap.css/';

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

尝试：

$（'head'）。追加（''）；
$（'head'）。追加（“”）；
$（'head'）。追加（“”）；
$（'head'）。追加（“”）；
$（'head'）。追加（“”）；
$（'head'）。追加（“”）；
$（'head'）。追加（“”）；

因此，您的计算器需要超过1MB的数据，包括两次引导，如果同时使用引导，则会覆盖页面的引导样式。看看其他插件、小部件、库等是如何做到这一点的。这只是我为熟悉这一实践而做的一个小样本——我知道这很糟糕。你知道有一个简单的例子吗？不过，谢谢你的反馈！我刚刚在谷歌上快速搜索了创建javascript小部件的

，结果发现这对我来说很好。你的方法本身并没有错，只是通常你想为你的小部件提供一个压缩的、名称空间的样式表，它只包含所需的样式。明白了-非常感谢。我一定会重新审视我的工作，并尝试实现这一点。如果你的评论是一个答案，我会把它标记为正确的。祝你有美好的一天。
var bootstrapCss = document.createElement('link');

bootstrapCss.rel = 'stylesheet';
bootstrapCss.href = 'http://website.com/config/bootstrap.css/';

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

$('head').append('<link />');
$('head').append("");
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.css\" media=\"screen\"    rel=\"stylesheet\">");
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.min.css\" rel=\"stylesheet\"><!-- web fonts -->");
$('head').append("<link href=\"http:\/\/website.com\/config\/font-awesome.min.css\" rel=\"stylesheet\">");
$('head').append("<link href=\"http:\/\/website.com\/config\/style.css\" rel=\"stylesheet\" type=\"text\/css\">");
$('head').append("");