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

이 글에서는 노드의 추가, 교체, 삭제, 복사 기능을 구현하기 위한 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主动替换
$('#wu').replaceAll($('#shu'));
//replaceWith被动替换
$(&#39;#yu&#39;).replaceWith(&#39;<li>黄盖</li>&#39;);

3을 삭제합니다. node.empty() .remove()

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

4 , node.clone 복사( true) .clone(false)

파라미터가 true이면 노드와 해당 이벤트가 복사됩니다
파라미터가 false이면 노드 자체(내부 정보 포함)만 복사됩니다

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

관련 권장 사항:

A 간략한 토론 이벤트 버블링, 이벤트 위임, jQuery 요소 노드 작업

zTree 비동기 로딩 및 첫 번째 수준 노드 메서드 구현 확장

JQuery 선택기 공유 예제, DOM 노드 작업 실습

위 내용은 jQuery를 이용한 노드 추가, 교체, 삭제, 복사 기능에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!