javascript DOM(五)----插入、删除节点

插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
   var reference = element.insertBefore(newNode,targetNode);
         节点 newNode 将易做图入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
    2). 自定义 insertAfter() 方法
    /**
* 将 newChild 插入到 refChild 的后边
* @param {Object} newChild
* @param {Object} refChild
*/
function insertAfter(newChild, refChild){
  var refParentNode = refChild.parentNode;

  //判断 refChild 是否存在父节点
  if(refParentNode){
   //判断 refChild 节点是否为其父节点的最后一个子节点
   if(refChild == refParentNode.lastChild){
    refParentNode.appendChild(newChild);
   }else{
    refParentNode.insertBefore(newChild, refChild.nextSibling);
   }
  }
}

代码:

Java代码
<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. 新建一个 "<li>伦敦</li>", 并将该节点添加到 #dj 的前边
                var ld = document.createElement("li");
                ld.appendChild(document.createTextNode("伦敦"));

                document.getElementById("city").insertBefore(ld, document.getElementById("dj"));

                //2. 新建一个 "<li>纽约</li>", 并将该节点添加到 #dj 的后边
                var ny = document.createElement("li");
                ny.appendChild(document.createTextNode("纽约"));
                insertAfter(ny, document.getElementById("dj"));

                //3. 新建一个 "<li>芝加哥</li>", 并将该节点添加到 "首尔" 节点的后边
                var zjg = document.createElement("li");
                zjg.appendChild(document.createTextNode("芝加哥"));
                insertAfter(zjg, document.getElementById("city").lastChild);
            };

            /**
             * 把 newChild 放到 targetChild 节点的后边
             * @param {Object} newChild
             * @param {Object} targetChild
             */
            function insertAfter(newChild, targetChild){
                //1. 获取 targetChild 的父节点
                var parentNode = targetChild.parentNode;

                //2. 判断 targetChild 节点是否为其父节点的最后一个子节点
                if(parentNode){
                    //3. 若是最后一个子节点: 则直接把 newChild 加为 targetChild 父节点的子节点即可
                    if(parentNode.lastChild == targetChild){
                        parentNode.appendChild(newChild);
                    }
                    //4. 若不是最后一个子节点: 则先获取 targetChild 节点的下一个兄弟节点, 然后调用 insertBefore() 方法
                    else{
                        parentNode.insertBefore(newChild, targetChild.nextSibling);
                    }
                }
            }

        </script>

    </head>
    <body>
        <p>你喜欢哪个城市?</p>

补充：web前端 , JavaScript ,