JavaScript学习-DOM操作技术-优快云博客

本文介绍了如何通过JavaScript动态地加载脚本文件和样式表，包括插入外部文件和直接插入代码的方法。此外还展示了如何利用DOM操作来创建和管理HTML表格。

1，动态脚本

创建动态脚本也有两种方式

插入外部文件

代码示例，也可以把这个脚本文件添加到head元素中

function loadScript(url){
    var script = document.createElement("script");
    script.type = "text.javascript";
    script.src = url;
    document.body.appendChild(script);
}

直接插入JavaScript代码

如要添加的HTML示例

<script type="text/javascript">
    function sayHi(){
        alert("hi");
    }
</script>

脚本代码如下

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

2，动态样式

介绍
- \<\link>元素用于包含来自外部的文件，\<\style>元素用于指定嵌入的样式。

使用\<\link>动态添加

要动态添加的元素如下：

<link rel="stylesheet" type="text/css" href="styles.css">

脚本代码如下

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>

元素包含嵌入的CSS，如下

<style type="text/css">
body{
    background-color:red;
}
</style>

脚本代码如下

function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    } catch(ex){//兼容IE
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}