使用 javascript 将 javascripts 和 css 文件动态添加到 html答案

【问题标题】：add javascripts and css files dynamicly to html using javascript使用 javascript 将 javascripts 和 css 文件动态添加到 html
【发布时间】：2011-04-22 10:14:55
【问题描述】：

我正在构建一个 javascript 小部件，我需要将我的小部件 css 和 js 文件动态添加到客户端页面。

我现在正在这样做：

    var css = document.createElement('link');
   css.setAttribute('rel', 'stylesheet');
   css.setAttribute('href', 'css path');
   document.getElementById('test').appendChild(css);
   alert(document.getElementById('test').innerHTML);

但它不会将元素添加到 dom。警报显示正确。

我错过了什么？

编辑1：

这是更新后的代码：（注意这只是一个测试页面）。

<html>
    <head>

    </head>
    <body>
        <div id="test">
            test
        </div>

        <script type="text/javascript">


    var css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute("type", "text/css");
    css.setAttribute('href', 'path');
    var header  = document.getElementsByTagName("head")[0];
    header.appendChild(css);
    alert(header.innerHTML);

        </script>  
    </body>
</html>

header.InnerHtml 显示正确，但页面中没有添加任何内容。

【问题讨论】：

您实际上是将href 设置为"css path"，还是设置为您的CSS 的实际路径？ - 另外，将 CSS 附加到 <head>。
路径正确。我已将 url 粘贴到浏览器中，它显示了我的 css 文件。
路径正确，但是文件css的权限对吗？如果您直接插入文档，文件是否被正确解析？
嗯，路径似乎有点错误。现在可以了。谢谢。

标签： javascript css dom widget append

【解决方案1】：

我认为您需要将其附加到您的 html 中，而不仅仅是文档：

var css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute("type", "text/css");
css.setAttribute('href', 'css path');
var header   = document.getElementsByTagName("head")[0];
header.appendChild(css);

希望这会有所帮助:)

【讨论】：

它仍然不起作用。 header 元素的 innerHTML 是正确的，但页面中没有添加任何内容。我将在第一次发布更新的代码。

【解决方案2】：

您是否尝试将 css 附加到

部分？

var css = document.createElement('link');
   css.setAttribute('rel', 'stylesheet');
   css.setAttribute('href', 'css path');
   document.getElementsByTagName('head')[0].appendChild(css);

【讨论】：

+1 - CSS 包含需要在文档的“head”元素中声明。在其他任何地方包含它是无效的。