jQuery_jquery를 사용하여 DOM 노드를 이동하고 복사하기 위한 실제 DOM 작업 사례

이 기사에서는 DOM 노드를 이동하고 복사하는 jQuery의 프로그램 구현을 간략하게 소개합니다. 학습이 필요한 친구는 참고할 수 있습니다.

프로젝트 작업 시 다음 코드와 같이 DOM 노드를 이동해야 합니다.

코드 복사 코드는 다음과 같습니다.

테스트 결과 jQuery에서 dom 노드를 이동하는 것이 매우 편리한 것으로 나타났습니다.

코드 복사 코드는 다음과 같습니다.

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

이렇게 하면 p 태그를 div 태그에 절대로 쓰지 마세요.

코드 복사 코드는 다음과 같습니다.

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

이것은 p 태그의 내용을 div 태그로 복사하는 것입니다.

div 태그에 복사본을 복사하고 원본 태그가 그대로 유지되는 경우 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

예제

코드 복사 코드는 다음과 같습니다.

$(function(){
$ (".nm_ul li").click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 현재 클릭한 노드를 복사하여 })
});

clone 매개변수가 true로 설정되면 버튼에 바인딩된 이벤트를 새 버튼에도 복사할 수 있습니다

clone() 메서드에 true 매개변수가 전달되는데, 이는 요소를 복사할 때 해당 요소에 바인딩된 이벤트도 복사된다는 의미입니다. 따라서 요소의 복사본에도 복사 기능이 있습니다. 이벤트를 복사하지 않으려면 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

노드 이동
페이지의 노드를 다른 노드로 이동하려면 장소에서는 jq 내부 및 외부 삽입 방법(append,appendTo, prepend, prependTo, after, before, insertAfter, insertBefore)을 사용할 수 있으며, 선택한 노드를

<에 전달하여 직접 이동할 수 있습니다. 🎜> 코드 복사 코드는 다음과 같습니다.

Move Me! ="box">
인스턴스
$("button").click(function(){
$(this).appendTo($("#box"));
//또는 추가 사용
$("#box").append(this);
});


노드 복사도 일반적으로 사용되는 DOM 작업 중 하나입니다. , 많은 쇼핑 웹 사이트의 효과와 같이 사용자는 제품 아래의 "선택"버튼을 클릭하여 해당 제품을 구매할 수도 있고 마우스로 제품을 드래그하여 장바구니에 담을 수도 있습니다. 이 상품 드래그 기능은 복사 노드를 사용하여 사용자가 선택한 상품의 노드 요소를 복사하고 마우스로 이동하여 쇼핑 효과를 얻습니다.

HTML DOM 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

스크립트 하우스 라이브러리에 오신 것을 환영합니다

• 알기 쉬운 C 매직
title= 'JavaScript Magic'>간단하고 이해하기 쉬운 JavaScript 마술

• 간단하고 이해하기 쉬운 JQuery 마술
  

요소를 클릭한 후 다른

요소를 복사해야 하는 경우 clone() 메서드를 사용하여 먼저 효과를 살펴보겠습니다.
효과 데모
스크립트 홈 라이브러리에 오신 것을 환영합니다
알기 쉬운 PHP 매직
알기 쉬운 C 매직
알기 쉬운 JavaScript 매직
알기 쉬운 JQuery 매직
JQuery 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$( function(){
$(".nm_ul li") .click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 현재 클릭한 노드를 복사합니다.

요소
} )
})

페이지에서 항목을 클릭하면 해당 항목에 대한 새 노드가 하단에 나타납니다. 목록.
노드를 복사한 후 복사된 새 요소에는 아무런 동작이 없습니다. 새 요소에 복사 기능(이 경우 클릭 이벤트)이 필요한 경우 다음 JQuery 코드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$("ul li").click(function(){
$(this).clone(true).appendTo("ul" ); // 매개변수에 주의하세요 true
//자체를 복사할 수 있으며 복사본도 동일한 기능을 갖습니다
})