将目标元素插入指定位置，删除子节点，替换子节点、应用之城市联动框

来源：互联网发布：kuka编程软件编辑：程序博客网时间：2024/05/21 19:21

一、将目标元素插入指定位置，删除子节点，替换子节点
1、elt.insertBefore(newNode, oldNode); 添加到elt中，child之前。
注意： elt必须是oldNode的直接父节点。 table表格中的<tr>的直接父节点为<tbody>，浏览器默认添加的，而并不是<table>
2、elt.removeChild(child) 删除指定的子节点
3、elt.replaceChild(child) 替换指定的子节点
注意： elt必须是child的直接父节点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">    //添加附件    function addFile(){        //先要创建一个tr对象        var trNode = document.createElement("tr");         //创建td对象        var tdNode1 = document.createElement("td");        var tdNode2 = document.createElement("td");        //tdNode1.setAttribute()这种方法也可以        tdNode1.innerHTML ="<input type='file'/>";        tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";        //把td的节点添加到tr节点上        trNode.appendChild(tdNode1);        trNode.appendChild(tdNode2);        var tbodyNode = document.getElementsByTagName("tbody")[0];        var lastRow = document.getElementById("lastRow");        tbodyNode.insertBefore(trNode,lastRow);    }    //删除附件    function delFile(aNode){        var trNode = aNode.parentNode.parentNode;        var tbodyNode = document.getElementsByTagName("tbody")[0];        tbodyNode.removeChild(trNode);    }</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>    <table>        <tr>            <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td>        </tr>        <tr id="lastRow">            <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>        </tr>    </table></body></html>

为什么总是说直接父节点，同过上面的代码心细的朋友应该发现了，<td>的父节点是<tr>,而<tr>的父节点却并不是<talbe>，而是<tbody>，有图有真相。

二、应用之城市联动框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">    function showCity(){        //维护一个二维数组存储省份对应的城市        var citys = [[],["沈阳","大连","本溪","鞍山"],["长沙","衡阳","岳阳","郴州"],["太原","运城","晋城","大同"]];                 //获取省份对应的节点        var provinceNode = document.getElementById("province");        //获取省份选项中的选中项的数值        var selectIndex =  provinceNode.selectedIndex;              //获取对应的城市        var  cityDatas = citys[selectIndex];                //找到city节点        var cityNode = document.getElementById("city");        /*        //先清空city框所有option，用这种方式清空for循环的第三个参数，不能写        var children = cityNode.childNodes;        for(var i = 0; i<children.length ; ){            cityNode.removeChild(children[i]);        }        */        //设置options的个数。        cityNode.options.length = 1 ;        //遍历对应的所有城市然后创建对应的option添加到city上。        for(var index = 0; index<cityDatas.length ; index++){            var option = document.createElement("option");            option.innerHTML = cityDatas[index];            cityNode.appendChild(option);        }    }</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>    省份<select id="province" onchange="showCity()">            <option>省份</option>            <option>辽宁</option>            <option>湖南</option>            <option>山西</option>        </select>    城市<select id="city"><option>城市</option></select>   </body></html>

0 0