三、节点拼接

大概:

①B添加到A中末尾

A.append(B)

B.appendTo(A)

②B添加到A中开头

A.prepend(B)

B.prependTo(A)

③B添加到A后面

A.after(B)

B.insertAfter(A)

④B添加到A前面

A.before(B)

B.insertBefore(A)

 

 

1.创建节点(DOM操作)

//点击body创建元素
            var body = document.querySelector("body");//js返回匹配的第一个对象
            document.addEventListener('click',function(){
                //创建两个div元素
                var div1 = document.createElement("div");
                var div2 = document.createElement("div");
                
                div1.setAttribute("class","red");
                div2.className = "green";
                
                div1.appendChild(div2);
                
                body.appendChild(div1);
            })

2.创建节点(JQuery)--append

//点击body创建元素
        //注意设置body的高度
        var $body = $("body");
        $body.on('click',function(){
            var div = $("<div class='red'><div class='green'></div></div>");
            //jquery的元素.append(节点)函数即是将节点插入元素到里面,作为最后一个子元素
            $body.append(div);
        })

 

3.prependTo

var div2 = $("<div class='green'></div>");
            var div = $("<div class='red'></div>");
            
            $body.append(div);
            $body.prepend(div2);//将div2插入body中，并且作为第一个子元素

 

 

4.appendTo()

var div2 = $("<div class='green'></div>");
            var div = $("<div class='red'></div>");
            //A.appendto(B)指将A加进B中去
            div2.appendTo(div);

 

5.prependTo

var div2 = $("<div class='green'></div>");
            var div = $("<div class='red'></div>");
            
            $body.append(div);
            div2.prependTo($body);//将div2插入到body中，并且作为第一个子元素

 

 

6.after()和before()

var $body = $("body");
        $body.on('click',function(){
            var div2 = $("<div class='green'></div>");
            var div = $("<div class='red'></div>");
            
            $body.append(div);
            div.after(div2);//在div之后插入div2,before同理为之前
        })

 

7.insertBefore()和insertAfter()

var divs = $("div");
            var div2=$("<div class='green'></div>")
            
            divs.before(div2);//在divs之前插入div2
            div2.insertBefore(divs);//在divs之前插入div2
            
            divs.after(div2);//在divs之后插入div2
            div2.insertAfter(divs);//在divs之后插入div2