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

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

我做这个现在：

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显示正确，但没有添加到页面。

来源

2010-10-07 brpaz

你居然href'设置''到” CSS路径“'，或者你设置为你的CSS的实际路径？ - 另外，将CSS附加到''。 – 2010-10-07 14:57:04

路径是正确的。我在浏览器中粘贴了网址，并显示了我的css文件。 – brpaz 2010-10-07 15:23:05

路径是正确的，但文件的CSS权限是正确的？如果直接插入文档，文件是否被正确解析？ – 2010-10-07 16:57:25

您是否尝试将css添加到<头部>部分？

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

来源

2010-10-07 14:57:05

+1 - CSS包括需要在文档的“head”元素中声明。将它包含在其他地方是无效的。 – Fenton 2010-10-07 14:59:55

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

希望这有助于:)

来源

2010-10-07 15:00:19 mrjames

它仍然没有工作。标题元素的innerHTML是正确的，但没有任何内容添加到页面中。我将在第一篇文章中发布更新后的代码。 – brpaz 2010-10-07 15:18:50

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

回答

相关问题