jQueryのDOMノード操作編

DOMノード操作
1.ノードの作成
一.作成ノードページをよりインテリジェント化するために、html構造ページに要素ラベルを動的に追加したい場合があります.挿入する前にまず行う動作は、ノードを作成することです.

var box = $('
  
'); //      
$('body').append(box); //          

2.ノードの挿入
内部ノードの挿入方法
メソッド名
説明
append(content)
指定した要素の内部の後ろにノードcontentを挿入
append(function (index, html) {})
匿名関数を使用して、指定した要素の内部の後ろにノードを挿入します.
appendTo(content)
指定した要素を指定した要素contentの内部に移動
prepend(content)
指定した要素contentの内部の前にノードを挿入
prepend(function (index, html) {})
匿名関数を使用して、指定した要素の内部の前にノードを挿入します.
prependTo(content)
指定した要素を指定した要素contentの内部の前に移動
≪インスタンス｜Instance｜emdw≫

$('div').append('  '); //  div      strong   
$('div').append(function (index, html) { //          ，html     
return '  ';
});
$('span').appendTo('div'); //  span      div    
$('span').appendTo($('div')); //  
$('div').prepend('  '); //  span     div      
$('div').append(function (index, html) { //      ，  
return '  ';
});
$('span').prependTo('div'); //  span    div      
$('span').prependTo($('div')); //  

外部挿入ノードメソッド
メソッド名
説明
after(content)
指定した要素の外側の後ろにノードcontentを挿入
after(function (index, html) {})
匿名関数を使用して、指定した要素の外側の後ろにノードを挿入します.
before(content)
指定した要素の外側の前にノードcontentを挿入
before(function (index, html) {})
匿名関数を使用して、指定した要素の外部の前にノードを挿入します.
insertAfter(content)
指定したノードを指定した要素contentの外部の後ろに移動
insertBefore(content)
指定したノードを指定した要素contentの外部の前に移動
≪インスタンス｜Instance｜emdw≫

$('div').after('  '); //  div           span
$('div').after(function (index, html) { //      ，  
return '  ';
});
$('div').before('  '); //  div           span
$('div').before(function (index, html) { //      ，  
return '  ';
});
$('span').insertAfter('div'); //  span      div        
$('span').insertBefore('div'); //  span      div        

3.ラップノード
メソッド名
説明
wrap(html)
指定した要素にhtmlコードをラップ
wrap(element)
指定した要素にDOMオブジェクトノードをラップ
wrap(function (index) {})
匿名関数を使用して、指定した要素にカスタムコンテンツをラップします.
unwrap()
指定した要素のラップの内容を削除
wrapAll(html)用html
すべての要素をラップ
wrapAll(element)用DOM
オブジェクトすべての要素をラップ
wrapInner(html)
指定した要素のサブコンテンツにhtmlをラップ
wrapInner(element)
指定した要素のサブコンテンツにDOMオブジェクトノードをラップ
wrapInner(function (index) {})
匿名関数で指定した要素のサブコンテンツにレイヤーをラップ

$('div').wrap(''); //  div        strong
$('div').wrap('123'); //          
$('div').wrap(''); //      
$('div').wrap($('strong').get(0)); //          DOM
$('div').wrap(document.createElement('strong')); //      DOM
$('div').wrap(function (index) { //    
return '';
});
$('div').unwrap(); //        ，       
$('div').wrapAll(''); //   div        strong
$('div').wrapAll($('strong').get(0)); //  
$('div').wrapInner(''); //       
$('div').wrapInner($('strong').get(0)); //DOM   
$('div').wrapInner(function () { //    
return '';
});

注意:wrap()と.wrapAll()の違いは、前者は各元素を1つの単立体と見なし、それぞれ1層の外層を含む.後者は、すべての要素を1つの全体として単独立体として、1層の外層だけを含む.これら2つはいずれも外層に含むものであり、wrapInner()は内層に含まれている.
4.ノード操作
jQueryは、ノードの作成、挿入、およびラップに加えて、ノードのコピー、置換、および削除などの一般的なノード操作方法を提供します.ノードのコピー

$('body').append($('div').clone(true)); //          HTML  
  ：clone(true)      ，          ，       。    true    ，                  。

ノードの削除

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

注意:remove()パラメータを持たない場合は、前のオブジェクトセレクタで指定するメタを削除する.remove()の能力は、$('div')などのセレクタパラメータを持つこともできる.remove('#box');id=boxのdivのみ削除します.イベントの削除ノードを保持

$('div').detach(); //         

注意:remove()と.detach()はいずれもノードを削除しますが、削除後は自身のメソッドで現在削除されているノードオブジェクトを返すことができますが、前者はリカバリ時にイベント動作を保持せず、後者は保持します.ノードをクリア

$('div').empty(); //         

ノードの置換

$('div').replaceWith('  '); //  div     span   
$('  ').replaceAll('div'); //  

注意:ノードが置換されると、含まれるイベント動作はすべて消えます.
下一篇:jQuery的基础DOM,CSS操作篇下一篇:jQuery的フォームセレクタ篇