DOM操作之动态脚本与动态样式插入

分别可以使用两种方式来引入，一种是通过引入外部文件的方式，如js文件的引入。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'test.js';
document.body.appendChild(script);

css的引入和这个类似，不再赘述。

第二种是使用内联的方式来插入内容。

在使用这种方式时，需要注意一下兼容性问题。如果按照上面代码的逻辑，应该是如下这个样子。

var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode(code));
document.body.appendChild(script);

不过很不巧的是在IE浏览器中，会导致错误，因为IE将<script>标签视为一个特殊元素，不允许DOM访问其子节点。解决办法是使用<script>的text属性来指定JavaScript代码。

script.text = code;

所以，兼容的写法如下

function loadScript(code) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    try {
        script.appendChild(document.createTextNode(code));
    }catch (e) {
        script.text = code;
    }
    document.body.appendChild(script);
}

这样，当appendChild方法执行出现错误时，就说明是IE浏览器，于是就必须使用text属性了。

同样，在IE浏览器中，其将<style>也视为一个特殊的与<script>类似的节点，不允许访问其子节点，所以，css的内联方式也不可以使用appendChild这样的方法来添加内容。解决办法是访问元素的styleSheet属性，该属性又有一个cssText属性，可以接受css代码。

css.styleSheet.cssText = cssCode;

那么，css代码插入的兼容性写法如下。

function loadStyle(css) {
    var style = document.createElement('style');
    style.type = 'text/css';
    try {
        style.appendChild(document.createTextNode(css));
    }catch (e) {
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}