添加元素

.append(content[,content]) / .append(function(index,html))

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

1. 可以一次添加多個(gè)內(nèi)容，內(nèi)容可以是DOM對(duì)象、HTML string、 jQuery對(duì)象

2. 如果參數(shù)是function，function可以返回DOM對(duì)象、HTML string、 jQuery對(duì)象，參數(shù)是集合中的元素位置與原來(lái)的html值

看幾個(gè)例子

$( ".inner" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

.appendTo(target)

把對(duì)象插入到目標(biāo)元素尾部，目標(biāo)元素可以是selector, DOM對(duì)象, HTML string, 元素集合, jQuery對(duì)象;

Insert every element in the set of matched elements to the end of the target.

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );

.prepend(content[,content]) / .prepend(function(index,html))

向?qū)ο箢^部追加內(nèi)容，用法和append類似，內(nèi)容添加到最開(kāi)始

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

$( ".inner" ).prepend( "<p>Test</p>" );

.prependTo(target)

把對(duì)象插入到目標(biāo)元素頭部，用法和prepend類似

Insert every element in the set of matched elements to the beginning of the target.

$( "<p>Test</p>" ).prependTo( ".inner" );

.before([content][,content]) / .before(function)

在對(duì)象前面(不是頭部，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容，參數(shù)和append類似

Insert content, specified by the parameter, before each element in the set of matched elements.

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );

.insertBefore(target)

把對(duì)象插入到target之前（同樣不是頭部，是同級(jí)）

Insert every element in the set of matched elements before the target.

$( "h2" ).insertBefore( $( ".container" ) );

.after([content][,content]) / .after(function（index）)

和before相反，在對(duì)象后面(不是尾部，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容，參數(shù)和append類似

Insert content, specified by the parameter, after each element in the set of matched elements.

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.insertAfter(target)

和insertBefore相反，把對(duì)象插入到target之后（同樣不是尾部，是同級(jí)）

Insert every element in the set of matched elements after the target.

$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

刪除元素

.remove([selector])

刪除被選元素（及其子元素）

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

我們也可以添加一個(gè)可選的選擇器參數(shù)來(lái)過(guò)濾匹配的元素

$('div').remove('.test');

.empty()

清空被選擇元素內(nèi)所有子元素

Remove all child nodes of the set of matched elements from the DOM.

$('body').empty();

.detach()

.detach() 方法和.remove()一樣, 除了 .detach()保存所有jQuery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)。當(dāng)需要移走一個(gè)元素，不久又將該元素插入DOM時(shí)，這種方法很有用。

包裹元素

wrap(wrappingElement) / .wrap(function(index))

為每個(gè)對(duì)象包裹一層HTML結(jié)構(gòu)，可以是selector, element, HTML string, jQuery object

Wrap an HTML structure around each element in the set of matched elements.

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

包裹元素

$( ".inner" ).wrap( "<div class='new'></div>" );

看看結(jié)果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll(wrappingElement)

把所有匹配對(duì)象包裹在同一個(gè)HTML結(jié)構(gòu)中

Wrap an HTML structure around all elements in the set of matched elements.

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

包裹元素

$( ".inner" ).wrapAll( "<div class='new' />");

看看結(jié)果

    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
      </div>
    </div>

.wrapInner(wrappingElement) / .wrapInner(function(index))

包裹匹配元素內(nèi)容，這個(gè)不好描述，一看例子就懂

Wrap an HTML structure around the content of each element in the set of matched elements.

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

包裹元素

$( ".inner" ).wrapInner( "<div class='new'></div>");

執(zhí)行結(jié)果

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

.unwrap()

把DOM元素的parent移除

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

pTags = $( "p" ).unwrap();

html([string])

這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的innerHTML

1. 當(dāng)沒(méi)有傳遞參數(shù)的時(shí)候，返回元素的innerHTML
2. 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候，修改元素的innerHTML為參數(shù)值

看個(gè)例子

$('div').html()

$('div').html('123')

后續(xù)這種讀寫兩用的方法很多，原理都類似

1. 如果結(jié)果是多個(gè)進(jìn)行賦值操作的時(shí)候會(huì)給每個(gè)結(jié)果都賦值
2. 如果結(jié)果多個(gè)，獲取值的時(shí)候，返回結(jié)果集中的第一個(gè)對(duì)象的相應(yīng)值

text()

和html方法類似，操作的是DOM的innerText值