DOM高级编程——动态添加和删除节点

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/lmyh1111/article/details/100046372

使用domcument对象可以创建、添加、删除DOM支持的任何类型节点，因此可以使用document对象制作动态添加、删除页面元素的特效，常见的操作有如下几种：

1. 使用document.createElement('tageName')创建指定标签名的元素节点（包括自定义的标签）；
2. 使用appendChild(node)将节点追加到所有子节点的末尾；
3. 使用fathernode.insertBefore(newNode,oldNode)将fathernode的子节点newNode插入到oldNode之前；
4. 使用removeChild删除节点。

下面列举一个添加和删除表格行的案例：

html如下（建立一个表格，包含商品名称、数量、单价、运费、最后计算合计总价）：

<table cellpadding='0' cellspacing='0' border="0" id="goods">
        <tbody>
            <tr>
                <th>商品名称</th>
                <th>数量 (件)</th>
                <th>单价 (元)</th>
                <th>运费 (元)</th>
                <th>合计</th>
            </tr>
            <tr>
                <td>鼠标</td>
                <td>2</td>
                <td>80</td>
                <td>10</td>
                <td>170</td>
            </tr>
            <tr>
                <td>鼠标</td>
                <td>2</td>
                <td>80</td>
                <td>10</td>
                <td>170</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="删除一行" onclick="delLine()">
    <input type="button" value="添加一行" onclick="addLine()">

js代码：

  /*   
     这个是点击添加的函数
  */
function addLine() {
            var onetr = document.createElement("tr"); //创建一行表格
            var onetd = document.createElement("td"); //创建一个单元格
            var twotd = document.createElement("td");
            var threetd = document.createElement("td");
            var fourtd = document.createElement("td");
            var fivetd = document.createElement('td');
            onetd.innerHTML = "显示屏";//在单元格中输入内容
            twotd.innerHTML = "4";
            threetd.innerHTML = "120";
            fourtd.innerHTML = 10;
            // fivetd.innerHTML=490;
            var count = 4 * 120 + 10;//计算总价
            fivetd.innerHTML = (count);
            onetr.appendChild(onetd);//追加子节点
            onetr.appendChild(twotd);
            onetr.appendChild(threetd);
            onetr.appendChild(fourtd);
            onetr.appendChild(fivetd);
            var goods = document.getElementsByTagName("tbody")[0]; //获取table
            goods.appendChild(onetr);
        }
  /*   
     这个是点击删除的函数
  */
        function delLine() {
            var goods = document.getElementsByTagName('tbody')[0];//获取table
            if (goods.childNodes.length > 1) {//
                goods.removeChild(goods.lastChild);
            } else {
                alert('不能删除标题');
            }
        }
    </script>