11.4 DOM增加HTML元素_编程_编程学习-IT料理

增加HTML元素

　　JavaScript脚本可以为DOM动态增加节点，程序为DOM树增加节点时，页面会动态地增加HTML元素。当需要为页面增加HTML元素时，应按如下两个步骤操作。
　　（1）创建或复制节点。
　　（2）添加节点。

创建或复制节点

　　创建节点通常借助于document对象的createElement方法来实现，语法如下。
　　➢　document.createElement(Tag)：创建Tag标签对应的节点。

例子

<script type="text/javascript">  
    // 创建一个新节点
    var a = document.createElement("div");
    // 使用警告对话框输出节点
    alert(a);
</script>

注意

　　调用document.createElement()方法时，传入的参数必须是一个合法的HTML标签。

　　创建一个节点的开销可能过大，实际上我们还可复制一个已有的节点，复制已有节点的系统开销略小。通过调用Node的cloneNode()方法即可复制一个已有节点，该方法的语法格式如下。
　　➢　Node cloneNode(boolean deep)：复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点；当deep为false时，表示仅复制当前节点。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 复制节点 </title>
</head>  
<body>  
    <ul id = "d">
        <li>疯狂Java讲义</li>
    </ul>
    <script type="text/javascript">
        // 获取ID为d的节点
        var ul = document.getElementById("d");
        // 复制ul的第二个子节点（不复制当前节点的后代节点）
        var ajax = ul.firstChild.nextSibling.cloneNode(false);
        // 修改被复制的节点
        ajax.innerHTML = "疯狂Ajax讲义";
        // 将复制的节点添加到页面中
        ul.appendChild(ajax);
    </script>
</body>  
</html>

添加节点

　　当一个节点创建成功后，一定要将该节点添加到DOM中才行。对于普通的节点，可采用Node对象的如下方法来添加节点。
　　➢　appendChild(Node newNode)：将newNode添加成当前节点的最后一个子节点。
　　➢　insertBefore(Node newNode, Node refNode)：在refNode节点之前插入newNode节点。
　　➢　replaceChild(Node newChild, Node oldChild)：将oldChild节点替换成newChild节点。
　　在前面已经看到了appendChild()方法的用法，下面仅对该代码进行简单修改，将原有的appendChild()修改成insertBefore()，修改后的关键代码如下。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 复制节点 </title>
</head>  
<body>  
    <ul id = "d">
        <li>疯狂Java讲义</li>
    </ul>
    <script type="text/javascript">
        // 获取ID为d的节点
        var ul = document.getElementById("d");
        // 复制ul的第二个子节点（不复制当前节点的后代节点）
        var ajax = ul.firstChild.nextSibling.cloneNode(false);
        // 修改被复制的节点
        ajax.innerHTML = "疯狂Ajax讲义";
        // 将复制的节点添加到页面中
        ul.insertBefore(ajax , ul.firstChild);
    </script>
</body>  
</html>

为列表框、下拉菜单添加选项

　　为列表框、下拉菜单添加子节点，也就是为列表框、下拉菜单添加选项。添加选项有两种方法：
　　➢　调用HTMLSelectElement的add()方法添加选项。
　　➢　直接为<select.../>的指定选项赋值。
HTMLSelectElement包含如下方法用于添加新选项。
　　➢　add(HTMLOptionElement option, HTMLOptionElement before)：在before选项之前添加option选项。如果想将option选项添加在最后，则将before指定为null即可；或者依然使用之前介绍的appendChild(option)添加亦可。　　

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加选项 </title>
</head>  
<body id="test">  
    <script type="text/javascript">
        // 创建<select.../>对象
        var a = document.createElement("select");
        // 为<select.../>对象增加10个选项
        for (var i = 0 ; i < 10 ; i++)
        {
            // 创建一个<option.../>元素
            var op = document.createElement("option");
            op.innerHTML = '新增的选项' + i;
            // 将新的选项添加到列表框的最后
            a.add(op , null);
        }
        // 设置列表框高度为5
        a.size = 5;
        // 将列表框增加成body元素的子节点
        document.getElementById("test").appendChild(a);
    </script>
</body>  
</html>

注意

　　上面的页面程序在Internet Explorer 8中将出现错误，主要是因为它不允许调用add()方法时指定最后一个参数为null。为了避免这种情况，我们可使用直接为指定选项赋值的方法来添加选项。

　　为指定选项赋值所支持的值必须是一个有效的选项，创建选项除了可使用前面所示的createElement()方法之外，还可使用如下构造器。
　　new Option(text, value, defaultSelected, selected)
　　该构造器有4个参数，这4个参数说明如下。
　　➢　text：该选项的文本，即该选项所呈现的“内容”。
　　➢　value：选中该选项的值。
　　➢　defaultSelected：设置默认是否选中该选项。
　　➢　selected：设置该选项当前是否被选中。
　　并不是每次构造该选项都需要指定4个参数，也可以只指定一个参数或者两个参数。如果构造Option对象时只指定了一个参数，则该参数是Option的text值；如果指定了两个参数，则第一个参数是text，第二个参数是value。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加选项 </title>
</head>  
<body id="test">  
    <script type="text/javascript">
        // 创建<select.../>对象
        var a = document.createElement("select");
        // 为<select.../>对象增加10个选项
        for (var i = 0 ; i < 10 ; i++)
        {
            // 创建一个<option.../>元素
            var op = new Option('新增的选项' + i , i);
            // 直接为指定选项赋值
            a.options[i] = op;
        }
        // 设置列表框高度为5
        a.size = 5;
        // 将列表框增加成body元素的子节点
        document.getElementById("test").appendChild(a);
    </script>
</body>  
</html>

动态添加表格内容

　　表格元素、表格行则另有添加子元素的方法。实际上，它们可以在添加子元素的同时创建这些子元素。也就是说，添加表格子元素时，往往无须使用document的createElement()方法来创建节点。
　　HTMLTableElement对象有如下方法。
　　➢　insertRow(index)：在index处插入一行。返回新创建的HTMLTableRowElement。
　　➢　createCaption()：为该表格创建标题。返回新创建的HTMLTableCaptionElement。如果该表格已有标题，则返回已有的标题对象。
　　➢　createTFoot()：为该表格创建元素。返回新创建的HTMLTableFootElement。如果该表格已有元素，则返回已有的元素。
　　➢　createTHead()：为该表格创建元素。返回新创建的HTMLTableHeadElement。如果该表格已有元素，则返回已有的元素。
　　HTMLTableRowElement对象代表表格行，该对象包含如下方法用于插入单元格。
　　➢　insertCell(long index)：在index处创建一个单元格，返回新创建的单元格。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加表格 </title>
</head>  
<body id="test">  
    <script type="text/javascript">
        // 创建一个表格对象
        var a = document.createElement("table");
        // 设置表格的边框为1
        a.border=1;
        var caption = a.createCaption();
        caption.innerHTML = "表格标题";
        // 为表格循环插入5行
        for (var i = 0 ; i < 5 ; i++)
        {
            // 插入行
            var tr = a.insertRow(i);
            // 为每行循环插入7列
            for (var j = 0 ; j < 7 ; j++)
            {
                // 循环插入7列
                var td = tr.insertCell(j);
                // 设置每个单元格的内容
                td.innerHTML = "单元格内容 " + i + j;
            }
        }
        //将表格元素添加到HTML文档内
        document.getElementById("test").appendChild(a);
    </script>
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。