Question

我正在构建一个javascript小部件，我需要动态地将我的widget 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中。警报显示正确。

我缺少什么？

EDIT1：

以下是更新的代码:(请注意，这只是一个测试页面。）

<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显示正确，但页面中没有添加任何内容。

Answer 1

您是否尝试将css附加到＆lt; head＆gt;部分？

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

Answer 2

我认为你需要将它附加到你的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);

希望这会有所帮助：）

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

2 个答案: