zoukankan      html  css  js  c++  java
  • javascript的insertBefore、insertAfter和appendChild简单介绍

     

    target.insertBefore(newChild,existingChild)
    参数说明:
    1.target:被添加节点和现有节点的父节点。
    2.newChild:将要被插入的节点。
    3.existingChild:现有的节点,新节点将会被插入到它的前面,此参数值可以为null。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>insertBefore()函数-蚂蚁部落</title> 
    <script type="text/javascript"> 
    window.onload=function()
    {
      var obox=document.getElementById("box");
      var lis=document.getElementsByTagName("li");
      var newLi=document.createElement("li");
      newLi.innerHTML="新蚂蚁部落";
      obox.insertBefore(newLi,lis[1]);
    }
    </script> 
    </head> 
    <body> 
    <ul id="box">
      <li>蚂蚁部落一</li>
      <li>蚂蚁部落二</li>
      <li>蚂蚁部落三</li>
      <li>蚂蚁部落四</li>
    </ul>
    </body> 
    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>insertBefore()函数-蚂蚁部落</title> 
    <script type="text/javascript"> 
    window.onload=function()
    {
      var obox=document.getElementById("box");
      var lis=document.getElementsByTagName("li");
      var newLi=document.createElement("li");
      newLi.innerHTML="新蚂蚁部落";
      obox.insertBefore(newLi,null);
    }
    </script> 
    </head> 
    <body> 
    <ul id="box">
      <li>蚂蚁部落一</li>
      <li>蚂蚁部落二</li>
      <li>蚂蚁部落三</li>
      <li>蚂蚁部落四</li>
    </ul>
    </body> 
    </html>

    二.appendChild()函数:
    此函数可以在父节点的内部的尾部追加一个新的节点。

    target.appendChild(newChild)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>insertBefore()函数-蚂蚁部落</title> 
    <script type="text/javascript"> 
    window.onload=function()
    {
      var obox=document.getElementById("box");
      var lis=document.getElementsByTagName("li");
      var newLi=document.createElement("li");
      newLi.innerHTML="新蚂蚁部落";
      obox.appendChild(newLi);
    }
    </script> 
    </head> 
    <body> 
    <ul id="box">
      <li>蚂蚁部落一</li>
      <li>蚂蚁部落二</li>
      <li>蚂蚁部落三</li>
      <li>蚂蚁部落四</li>
    </ul>
    </body> 
    </html>

    三.insertAfter函数:

       虽然DOM中没有提供insertAfter方法,但是我们可以通过insertBefore方法去完成这个方法的实现:
    
    function insert​After(newElement, targetElement) {
    
             var parent = targetElement​.parentNode;
    
             if(parent.lastChild == targetElement) {
    
                   ​parent.appendChild(newElement);
    
            }​
    
             else {
    
                  parent.insertBefore(newElement, targetElement.nextSibling);​
    
            }​
    
    }​

      下面,请看看这个函数是如何一步一步地完成工作的​

        (1)首先,这个函数有两个参数:一个是将被插入的新元素,另一个是目标元素。这两个参数通过变量newElement和targetElement被传递到这个函数;

        (2)把目标元素的parentNode属性值保存到变量parent里;

        (3)接下来,检查目标元素是不是parent的最后一个子元素;

        (4)如果是,就用appendChild方法把新元素追加到parent元素上,这样新元素就恰好被插入目标元素之后;

        (5)如果不是,就把新元素插入到目标元素和目标元素的下一个兄弟元素之间,目标元素的下一个兄弟元素即目标元素的nextSibling属性,用insertBefore方法把新元素插入到目标元素的下一个兄弟元素之前。

  • 相关阅读:
    1104 Sum of Number Segments (20 分)(数学问题)
    1092 To Buy or Not to Buy (20 分)(hash散列)
    1082 Read Number in Chinese (25 分)(字符串处理)【背】
    1105 Spiral Matrix (25 分)(模拟)
    初识网络安全及搭建网站(内网)
    HTML5开发者需要了解的技巧和工具汇总(转)
    native+web开发模式之web前端经验分享
    移动平台3G手机网站前端开发布局技巧汇总(转)
    Asp.net 中图片存储数据库以及页面读取显示通用方法详解附源码下载
    使用H3Viewer来查看VS2010的帮助文档
  • 原文地址:https://www.cnblogs.com/h5monkey/p/5891135.html
Copyright © 2011-2022 走看看