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}");