动态脚本
使用<script>元素可以向页面中插入Javascript代码，一种方式是通过其src特性包含外部文件，另一种方式就是用这个元素本身来包含代码。
而我们要说的动态脚本，指的是在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。跟操作HTML一样，创建动态脚本
也有两种方式：插入外部文件和直接插入Javascript代码
插入外部文件
function loadScript(url){ var script=document.createElement("script"); script.type="text/javascript"; script.src='/images/loading.gif' data-original=url; document.body.appendChild(script); }
直接插入Javascript代码
/*IE将<script>视为一个特殊的元素，不允许DOM访问其子节点， *因此会报错；除IE外，其他浏览器均支持appendChild方法；Safari 3.0 *以前的版本不能正确的支持text，所以最好也使用appendChild方法。 *总而言之，仅IE try会报错，然后进入catch块，其他浏览器try不报错*/ 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); }
动态样式
能够把CSS样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。与动态脚本
类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中。
link方式
function loadStyles(url){ var link=document.createElement("link"); link.rel="stylesheet"; link.type="text/css"; link.href=url; var head=document.getElementsByTagName("head")[0]; head.appendChild(link); }
style方式
//引入try catch的原因同直接插入Javascript代码的原因一致 function loadStylesString(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.getElementsByTagName("head")[0]; head.appendChild(style); }
结语：如果此文章当你有所帮助，请点击“推荐”，谢谢
原标题：DOM操作技术之动态脚本与动态样式（兼容版）
关键词：dom
我知道了 