javascript DOM(四)----节点替换

节点的替换:
1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
   var reference = element.replaceChild(newChild,oldChild);
   返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能.
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
/**
* 互换 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){

  if(aNode == bNode){
   return;
  }

  var aParentNode = aNode.parentNode;
  //若 aNode 有父节点
  if(aParentNode){
   var bParentNode = bNode.parentNode;

   //若 bNode 有父节点
   if(bParentNode){
    var tempNode = aNode.cloneNode(true);
    bParentNode.replaceChild(tempNode, bNode);
    aParentNode.replaceChild(bNode, aNode);
   }
  }

}
Html代码
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type="text/javascript">

            window.onload = function(){
                //1. 把 "东京" 节点替换为 "平壤"
                var pr = document.createElement("li");
                pr.appendChild(document.createTextNode("平壤"));

                document.getElementById("city").replaceChild(pr, document.getElementById("dj"));

                //2. 实现 #bj 和 #rl 之间的互换, 需要使用 cloneNode() 方法
                var bj = document.getElementById("bj");
                var rl = document.getElementById("rl");
//
//              var city = document.getElementById("city");
//              var game = document.getElementById("game");
//
//              city.replaceChild(rl.cloneNode(true), bj);
//              game.replaceChild(bj, rl);
                replaceEach(rl, bj);
            };

            /**
             * 互换节点
             * @param {Object} aNode
             * @param {Object} bNode
             */
            function replaceEach(aNode, bNode){
                var aParentNode = aNode.parentNode;
                var bParentNode = bNode.parentNode;

                //若 aNode 和 bNode 都存在父节点
                if(aParentNode && bParentNode){
                    aParentNode.replaceChild(bNode.cloneNode(true), aNode);
                    bParentNode.replaceChild(aNode, bNode);
                }
            }

        </script>

    </head>
    <body>
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj" name="BeiJing">北京</li>
            <li>上海</li>
            <li id="dj">东京</li>
            <li>首尔</li>
        </ul>

        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>易做图飞车</li>

补充：web前端 , JavaScript ,