获取节点操作DOM树

来源：互联网发布：网络集成平台编辑：程序博客网时间：2024/06/05 07:24
        <head>            <meta charset="UTF-8">            <title>Title</title>            <style type="text/css">                #div1{                    width: 150px;                    height: 160px;                    border: 1px solid red;                }                #div2{                    width: 150px;                    height: 100px;                    border: 1px double blue;                }            </style>        </head>        <body>        <div id="div1">            <ul id = "ul01">                <li>001</li>                <li>002</li>                <li>003</li>                <li>004</li>            </ul>        </div>        <div id="div2">        </div>        <input type="button" value="移动到下面" onclick="mov();">        <input type="button" value="复制到下面" onclick="cop();">        <input type="button" value="删除DIV2的元素" onclick="del();">        <input type="button" value="添加文本" onclick="addtext();">        <script type="text/javascript">            var u1 = document.getElementById("ul01");            var m1 = document.getElementById("div1");            var m2 = document.getElementById("div2");            function mov() {               if(m1.childNodes.length >1 && m2.childNodes.length ==1){                   m2.appendChild(u1);               }else {                   alert("已移动或上面没有元素")               }            }//移动元素            function cop() {                if(m1.childNodes.length >1 && m2.childNodes.length ==1){                    cp1 = u1.cloneNode(true);                    m2.appendChild(cp1);                }else{                    alert("已复制或上面没有元素")                }            }//复制元素            function del() {                if(m2.childNodes.length>1){                    for(var i = 1;i<m2.childNodes.length;i++){                        m2.removeChild(m2.childNodes[i]);                    }                }else if(m2.childNodes.length ==1){                    alert("DIV2中没有元素");                }            }//删除元素            function addtext() {                var txt1 = window.prompt("请输入插入的序号位置，如1，2，3，4","1");                var txt2 = window.prompt("请输入添加的文本，如005","005");                var lis = document.createElement("li");                var txs =  document.createTextNode(txt2);                lis.appendChild(txs);                u1.insertBefore(lis,u1.childNodes[txt1]);            }        </script>        </body>
阅读全文
0 0