jQuery中的DOM操作2

内部插入
​1.$ ( selector ) . append ( content ) ;
   $ ( selector ) . append ( function ( index , [ html ] ) ) ;
在指定节点  尾部  插入指定内容。
content可以是元素节点，html字符串，jQuery对象。
参数function是一个回调函数，index表示指定节点的索引值（通过选择器得到的jQuery对象是一个节点集合）
html表示当前索引值指定节点的html值。

<div>

<div id="div1" style="background: #ccc">第一章</div>

<div id="div2" style="background: #ccc">第二章</div>

<div id="div3" style="background: #ccc">第三章</div>

<div id="div4" style="background: #ccc">第四章</div>

</div>

<input id="btn" type="button" value="测试"
4000
/>

$(document).ready(function(index){

//法1

$("#btn").click(function(){

$("div.eq(1)").append("<b>jquery</b>");

//法2

$("div").append(function(){

if(index==1){

return "<b>jquery</b>";

}

});

});

});

2.$ ( content ) . appendTo ( selector ) ;——效果与append（）一样，操作顺序颠倒。

3.$ ( selector ) . prepend ( content )
   $ ( selector ) . prepend ( function ( index , [html] ) )
在指定节点的  头部  插入指定内容

4.$( content ) . prependTo ( selector )方法——效果与append（）一样，操作顺序颠倒。

外部插入

​1.​$( selector ) . after ( selector )方法

    $( selector ) .after ( function ( index , [html] )
在指定节点  后面  插入指定内容。

2.$( content ) . insertAfter ( selector )——效果与after（）一样，操作顺序颠倒。

3.$( selector ) . before ( content )
    $( selector ) . before ( function ( index ,[html] )
在指定节点  前面  插入节点内容。

4.$( content ) . insertBefore ( selector )——效果与before（）一样，操作顺序颠倒。

注意：外部插入的节点与目标节点是兄弟关系，内部插入的节点与目标节点是父子关系。

<div>

<div id="div1" style="background: #ccc">第一章</div>

<div id="div2" style="background: #ccc">第二章</div>

<div id="div3" style="background: #ccc">第三章</div>

<div id="div4" style="background: #ccc">第四章</div>

</div>

<input id="btn" type="button" value="测试" />

$(document).ready(function() {

$("#btn").click(function(){

var newNode1 = $("<div>前言 漫谈</div>");

var newNode2 = $("<div>第五章</div>");

//外部插入

$("#div1").after(newNode1);

//内部插入

$("#div4").append(newNode2);

});

});

包裹操作

​​1.$(
selector ) . wrap ( wrapper )
    $( selector ) . wrap( function )
把所有匹配的节点用结构化的标记包裹起来。
如果用已经存在的元素节点去包裹目标节点，则该节点本身不会被移动，而是被复制了一份。
function是一个回调函数，没有参数。该函数返回的内容就是去包裹匹配节点的内容。
如：function（）{ return  “<b></b>”  }

2.$( selector ) . unwrap ( )
移除匹配节点的父节点，可快速取消wrap（）方法的效果。

$("#btn").click(function(){

$("#div1").wrap("<b></b>");

});

$("#btn2").click(function(){

$("#div1").unwrap();

});

3.$( selector ) . wrapAll ( wrapper )
与wrap（）相似，但wrap（）会在每个匹配的节点外包裹一个节点；而wrapAll（）则在一组匹配的节点集合外面包裹一个节点。

4.$( selector ) . wrapInner ( wrapper )
    $( selector ) . wrapInner ( function )
把所有匹配节点的子节点（包括文本节点）用指定的结构化标记包裹起来。

<div>

<div id="div1" style="background: #ccc">第一章</div>

<div id="div2" style="background: #ccc">第二章</div>

<div id="div3" style="background: #ccc">第三章</div>

<div id="div4" style="background: #ccc">第四章</div>

</div>

<input id="btn" type="button" value="测试" />

$(document).ready(function(){

$("#btn").click(function(){

var newNode = $("<b></b>");

// $("div>div").wrap(newNode);

$("div>div").wrapInner(newNode);

});

});