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="测试" />

$(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);
});
});