DOM操作技术之动态添加script和样式

向页面中添加JavaScript代码，一种方式是引用外在文件，另一种是使用script标签嵌入JavaScript代码，我们一般使用的是引用外在文件，但是只有当页面中的所有外在文件都加载和解析完毕后，页面才算完全加载完毕并且显示，页面显示会产生延时。我们想能不能页面加载时不去加载和解析外在文件，当要引用外在文件的时候再加载和解析，这里就用到了动态添加脚本：

//直接引用外部js文件
<script type="text/javascript" src="test.js"></script>
//动态加载js文件，把它封装在函数里
function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

loadScript("test.js");

//另外一种方式是在script标签里面嵌入代码
//一般的方式
<script type="text/javascript">
    function sayHello() {
        alert("Hello.");
    }
</script>
//等价于
var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(
document.createTextNode("function sayHello(){alert('Hello.');}"));
document.body.appendChild(script);

//上面这段代码在IE中会抛出错误，IE将<script>视为一个特殊的元素，不允许DOM访问其子节点，不过可以使用<script>元素的text属性指定js代码,完整代码如下：

function loadScriptString(code) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch(ex) {
        script.text = code;
    }
    document.body.appendChild(script);
}

loadScriptString("function sayHello(){alert('Hello.');}");

动态样式也类型：

//一般引用css外部文件
<link rel="stylesheet" type="text/css" href="test.css"></link>

//动态加载，封装在函数内
function loadStyle(url) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementTagName("head")[0];
    head.appendChild(link);
}

loadStyle("test.css");

//另一种方式是在<style>内嵌入css，如：
<style type="text/css">
    body {
        background-color: red;
    }
</style>
//等价于
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(
document.createTextNode("body{background-color:red}"));
var head = document.getElementTagName("head")[0];
head.appendChild(style);

//同理，由于IE中会报错，将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点。不过可以使用style元素的styleSheet.cssText属性添加css代码，完整代码如下：
function loadStyleString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode(css));
    } catch(ex) {
        style.styleSheet.cssText = css
    }
    var head = document.getElementTagName("head")[0];
    head.appendChild(style);
}

loadStyleString("body{background-color:red}");