在DOM中自定义一个函数实现两个节点的互换 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在DOM中自定义一个函数实现两个节点的互换</title>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city" >
    <li id="bj" name="beijing">北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
</ul>
<br><br>
<p>你最喜欢哪款单击游戏？</p>
<ul id="game" >
    <li id="rl" >红警</li>
    <li>实况</li>
    <li>极品飞车</li>
    <li>魔兽</li>
</ul>
<script type="text/javascript">
    window.onload = function(){
        var bjNode = document.getElementById("bj");
        var rlNode = document.getElementById("rl");
        /*自定义两个节点互换的函数*/
        function replaceEach(aNode,bNode){
            //获取aNode和bNode的父节点，使用parentNode属性
            var aParent = aNode.parentNode;
            var bParent = bNode.parentNode;
            if(aParent&&bParent){
                //将aNode或者bNode克隆给一个新的变量
                var aNode2 = aNode.cloneNode(true);
                //分别用aNode的父节点和bNode的父节点调用replaceChild()方法，实现aNode与bNode节点的互换;
                bParent.replaceChild(aNode2,bNode);
                aParent.replaceChild(bNode,aNode);
            }
        }
        replaceEach(rlNode,bjNode)
    }
</script>
</body>
</html>

 

posted on 2015-11-24 21:20  冬刻忆  阅读(153)  评论(0)    收藏  举报