dom的节点操作 

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script>
        window.onload=function()
        {
            var father=document.getElementById("father");
            var chade=document.createElement("div");  //创建节点
            father.appendChild(chade);  //添加节点，放到所有孩子的最后面

            var chade2=document.createElement("div");
            var kidall=father.children;  //父亲的所有孩子
            father.insertBefore(chade2,kidall[1]); //插入到父亲第2个孩子的前面，那么就称为父亲的第二个孩子

            var chade3=document.createElement("div");
            father.insertBefore(chade3,null); //如果第二个参数是null,默认是放到最后面

            father.removeChild(chade3); //移除chade3这个孩子

            chade.parentNode.appendChild(chade.cloneNode()); //chade的爸爸添加节点相当于添加chade的兄弟
            father.appendChild(father.cloneNode()); //父亲添加一个和他长得一模一样的孩子
            var kid1=document.getElementById("kid1");
            kid1.appendChild(kid1.cloneNode());//kid1添加一个孩子，名字也叫做Kid1
        }
    </script>
</head>
<body>
    <div id="father">
        <div id="kid1"></div>
        <div class="kid2"></div>
    </div>
</body>
</html>

　　

posted @ 2019-07-18 21:13  shanlu  阅读(107)  评论(0)  编辑  收藏  举报