jQuery를 이용한 노드 추가, 교체, 삭제, 복사 기능에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery를 이용한 노드 추가, 교체, 삭제, 복사 기능에 대한 자세한 설명

小云云

풀어 주다： 2018-01-01 10:54:04

원래의

1702명이 탐색했습니다.

이 글에서는 노드의 추가, 교체, 삭제, 복사 기능을 구현하기 위한 jQuery를 주로 소개하며, append(), prepend(), replacementAll(), replacementWith() 등의 구체적인 예시를 바탕으로 DOM 노드에 대한 jQuery의 작동 기술을 분석합니다. 비어 있음( ), 제거(), 클론(), 클론() 및 기타 방법이 필요한 친구가 참조할 수 있으므로 모두에게 도움이 되기를 바랍니다.

이 문서의 예에서는 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); //复制节点和事件

로그인 후 복사