jQuery_jquery を使用して dom ノードを移動およびコピーする実践的な DOM 操作ケース

この記事では、dom ノードの移動とコピーを行う jQuery のプログラム実装について簡単に紹介します。学習が必要な方は参考にしてください。

プロジェクトで作業するときは、次のコードのような DOM ノードを移動する必要があります:

コードをコピー コードは次のとおりです:

p タグを div タグに追加します。テストの結果、jQuery で dom ノードを移動すると非常に便利であることがわかりました。

コード コードは次のとおりです:

$('div ').append($('p'))

このようにして、 p タグを div タグに含めないでください:

コードをコピー コードは次のとおりです:

$('div').append( $('p').html() )

これは、p タグの内容を div タグにコピーするだけです。
コピーを div タグにコピーするだけで、元のタグがまだ保持されている場合は、次のように記述できます:

コードをコピー コードは次のとおりです:

$('div').append( $('p').clone(true))

Example

コードをコピーします コードは次のとおりです:

$(function(){
$ (".nm_ul li").click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 現在クリックされているノードをコピーし、})
});

また、clone パラメーターが true に設定されている場合、ボタンにバインドされているイベントも新しいボタンにコピーできます

パラメータ true が clone() メソッドに渡されます。これは、要素をコピーすると、その要素にバインドされているイベントもコピーされることを意味します。したがって、要素のコピーにもコピー機能があります。イベントをコピーしたくない場合は、次のように記述できます:

コードをコピー コードは次のとおりです:

$('div').append( $('p').clone())

ノードの移動
ページ上のノードを別のノードに移動するにはjq の内部および外部の挿入メソッド (append、appendTo、prepend、prependTo、after、before、insertAfter、insertBefore) を使用できます。選択したノードを

< に渡すことで直接移動できます。 🎜> コードをコピー コードは次のとおりです:

Move Me!

インスタンス
$("button").click(function(){
$(this).appendTo($("#box"));
//または append
$("#box").append(this);
});


ノードのコピーも、一般的に使用される DOM 操作の 1 つです。 、多くのショッピング サイトの効果など、ユーザーは商品の下の「選択」ボタンをクリックするか、マウスで商品をドラッグしてショッピング カートに入れるだけで、該当する商品を購入できます。この製品ドラッグ機能は、コピー ノードを使用して、ユーザーが選択した製品のノード要素をコピーし、マウスで移動してショッピング効果を実現します。

HTML DOM 構造は次のとおりです:

コードをコピーします コードは次のとおりです:

スクリプト ハウス ライブラリへようこそ

わかりやすい PHP Magic

• わかりやすい C Magic
title= 'JavaScript の魔法'>シンプルでわかりやすい JavaScript の魔法

• シンプルでわかりやすい JQuery の魔法

要素をクリックした後に別の

要素をコピーする必要がある場合は、clone() メソッドを使用してそれを完了します。
効果のデモ
スクリプト ホーム ライブラリへようこそ
わかりやすい PHP マジック
わかりやすい C マジック
わかりやすい JavaScript マジック
わかりやすい JQuery マジック
JQuery コードは次のとおりです。

コードをコピー コードは次のとおりです。

$( function(){
$(".nm_ul li") .click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 現在クリックされているノードをコピーしますそれを

要素に追加します
} )
});

ページ上の項目をクリックすると、その項目の新しいノードが下部に表示されます。リスト。
ノードをコピーした後、コピーされた新しい要素は何も動作しません。新しい要素にコピー機能 (この場合はクリック イベント) も必要な場合は、次の JQuery コードを使用できます:

Copy code コードは次のとおりです。

$("ul li").click(function(){
$(this).clone(true).appendTo("ul" ); // パラメータ true
//自身をコピーでき、そのコピーも同じ機能を持ちます
})