JavaScript之appendChild、insertBefore和insertAfter-阿里云开发者社区

JavaScript之appendChild、insertBefore和insertAfter

2017-01-18 991

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

这几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对appendChild、insertBefore和insertAfter做个总结

appendChild定义

  appendChild(newChild: Node) : Node
 Appends a node to the childNodes array for the node.
 Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+
 

添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口，简单地说就是将元素添加到指定的节点中

appendChild用法

target.appendChild(newChild)
newChild作为target的子节点插入最后的一子节点之后

appendChild例子

     
var newElement = document.Document.createElement('label'); 
 newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username'); 
 usernameText.appendChild(newElement);

insertBefore定义

 
    The insertBefore() method inserts a 
    new
     child node before an existing child node.

insertBefore() 方法的作用是：在现有的子节点前插入一个新的子节点

insertBefore用法

target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前
existingChild为可选项参数，当为null时其效果与appendChild一样

insertBefore例子

 
       var
        oTest 
       =
        document.getElementById(
       "
       test
       "
       );

       var
        newNode 
       =
        document.createElement(
       "
       p
       "
       );
 newNode.innerHTML 
       =
        
       "
       This is a test
       "
       ;

 oTest.insertBefore(newNode,oTest.childNodes[
       0
       ]);   
      

好了那么有insertBefore的应该也有insertAfter吧？

好那我们来用Aptana编写一个例子吧，但Aptana的智能提示告诉我其实没有insertAfter这个方法

那么就自己定义一个罗:)

insertAfter定义

           
          
function insertAfter(newEl, targetEl)
         {
             var parentEl = targetEl.parentNode;
             
             if(parentEl.lastChild == targetEl)
             {
                 parentEl.appendChild(newEl);
             }else
             {
                 parentEl.insertBefore(newEl,targetEl.nextSibling);
             }            
         }
           
          

insertAfter用法与例子

            
var txtName = document.getElementById("txtName");
 var htmlSpan = document.createElement("span");
 htmlSpan.innerHTML = "This is a test";
 insertAfter(htmlSpan,txtName);
将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后