appendChild和insertBefore ,append和appendTo

  $(selector).append(content,function(index,html))   //jQuery
  $(content).appendTo(selector)  //jQuery
  node.appendChild(node)//DOM
  node.insertBefore(newnode,existingnode)   //DOM  
  $(content).insertBefore(selector)// //jQuery
   

1.  $(selector).append(content,function(index,html))   //jQuery

	 var txt1="<p>Text.</p>";                // Create text with HTML
	 var txt2=$("<p></p>").text("Text.");  // Create text with jQuery
         var txt3=document.createElement("p");
	txt3.innerHTML="Text.";                   // Create text with DOM
	$("body").append(txt1,txt2,txt3);        // Append new elements

         

         $("button").append(" <b>ooo</b>")

	var kl = document.createElement("li");
	$(kl).append("ofijio");

      $("p").append("ppppp");
      $("p").append("<p>kkkk</p>");

2. $(content).appendTo(selector)  //jQuery

      $("h1").appendTo("p");

      $("<span>1w</span>").appendTo($("button"));

3.node.appendChild(node)    //DOM

    var node=document.createElement("LI");
    var textnode=document.createTextNode("Water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);

     

	var nodechild=document.getElementById("w1").lastChild;
	var node2 =document.getElementById("w2");
	node2.appendChild(nodechild);//DOM

4.node.insertBefore(newnode,existingnode)   //DOM  

     var node=document.getElementById("myList2").lastChild;
    var list=document.getElementById("myList1");
    list.insertBefore(node,list.childNodes[0]);

	var nodechild=document.getElementById("w1").lastChild;
	var node2 =document.getElementById("w2");
       node2.insertBefore(nodechild,node2.firstChild);//DOM

        var kl = document.createElement("li");
	node2.insertBefore(kl,node2.firstChild);

5.  $(content).insertBefore(selector)      //jQuery

      var chl =$("[name=divame]").children().last().children().first(); //   chl是jQuery对象
	$("<li>cccuuu</li>").insertBefore(chl);//jQuery

       $("<li>liushahe</li>").insertBefore($(node2.firstChild));

        $("<span>Hello world!</span>").insertBefore("p");

DOM操作：

首先 从定义来理解 这两个方法：

appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)

insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)

相同之处：插入子节点

不同之处：实现原理方法不同。

　　　　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。

　　　　   insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。

来看个这个简单的实例：在id为box-con 的末尾添加一个子节点div

这个insertBefore 的第一个参数 和appendChild的一样，都是那个新的节点变量，而insertBefore 第二个参数不仅可以为null 

insertAfter:  

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

$("<b> Hello jQuery!</b>").appendTo("p");  
$(selector).append(content);
$(selector).append(function(index,html));
$(content).appendto(selector);

原文：http://www.cnblogs.com/mybkn/archive/2013/04/09/3011061.html?utm_source=tuicool