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