ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryを使ったノードの追加・置換・削除・コピーの機能を詳しく解説

jQueryを使ったノードの追加・置換・削除・コピーの機能を詳しく解説

小云云オリジナル: 2018-01-01 10:54:041725ブラウズ

この記事では主に、ノードの追加、置換、削除、コピー機能を実装するための jQuery を紹介し、append()、prepend()、replaceAll()、replaceWith() などの具体的な例に基づいて DOM ノードに対する jQuery の操作スキルを分析します。 empty( )、remove()、clone()、clone() などのメソッドを必要とする友人が参照できるように、すべての人に役立つことを願っています。

この記事の例では、jQuery がノードの追加、置換、削除、コピーの機能を実装する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. 追加ノードは親子ノードと兄弟ノードの追加に分けられます。 ノードを追加する各方法は、アクティブな追加とパッシブな追加に分かれています。

//1、父子关系的添加
//主动添加
$(&#39;#shu&#39;).append(&#39;<li>关羽</li>&#39;);//往后添加
$(&#39;#shu&#39;).prepend(&#39;<li>黄忠</li>&#39;);//往前添加
//被动添加
$(&#39;<li>黄盖</li>&#39;).appendTo($(&#39;#wu&#39;));
$(&#39;<li>陆逊</li>&#39;).prependTo($(&#39;#wu&#39;));
//添加已存节点，发生位置改变
$(&#39;#shu&#39;).prepend($(&#39;#wu li:eq(1)&#39;));
//2、兄弟关系的添加.after .before .insertAfter .insertBefore
//主动
$(&#39;#liu&#39;).after(&#39;<li>赵云</li>&#39;);
$(&#39;#liu&#39;).before(&#39;<li>诸葛亮</li>&#39;);
//被动
$(&#39;<li>黄月英</li>&#39;).insertAfter($(&#39;#liu&#39;));
$(&#39;<li>孙尚香</li>&#39;).insertBefore($(&#39;#liu&#39;));

2.node.replaceAll .replaceWith

//replaceAll主动替换
$(&#39;#wu&#39;).replaceAll($(&#39;#shu&#39;));
//replaceWith被动替换
$(&#39;#yu&#39;).replaceWith(&#39;<li>黄盖</li>&#39;);

3.node.empty() .remove()を削除します

$(&#39;#wu&#39;).empty(); //清空对应的子节点
$(&#39;#fei&#39;).remove(); //删除匹配到的节点

4 、node.clone(をコピーします) true) .clone(false)

パラメータがtrueの場合、ノードとそのイベントがコピーされます
パラメータがfalseの場合、ノード自体(内部情報を含む)のみがコピーされます

$(&#39;#fei&#39;).clone(false); //只复制节点本身
$(&#39;#fei&#39;).clone(true); //复制节点和事件

jQueryを使ったノードの追加・置換・削除・コピーの機能を詳しく解説

関連記事