Javascript & JQuery & CSS

clone() 함수는 일치하는 요소 집합의 깊은 복사(deep copy)를 합니다.

.clone( [withDataAndEvents] )
  withDataAndEvents 이벤트처리기에서 요소와 함께 복사를 할건지를 결정하는 부울값.
.clone( [withDataAndEvents,] [deepWithDataAndEvents] )
  withDataAndEvents 이벤트 핸들러와 데이터 요소와 함께 복사해야하는지 여부를 나타내는 부울값. 기본값은 false.
  deepWithDataAndEvents 이벤트 처리기와 복제된 요소의 모든 자식 요소 데이터를 복사해야하는지 여부를 결정하는 부울값.
  기본값은 첫 번째 인수의 값과 일치.


.clone() 함수는 선택된 요소 집합을 깊은 복사(deep copy)할 수 있는 기능을 합니다.
깊은 복사(deep copy)의 의미는 선택된 요소들의 모든 자식 요소들과 텍스트 노드들을 모두 포함하는 것입니다.
끼워넣기 위한 함수의 용도로 사용될 때, .clone() 함수는 페이지 상에 요소들을 복사하여 넣기에는 아주 편한 방법입니다.
다음 HTML을 보도록 하겠습니다.
 

		<div class="container">
				<div class="hello">Hello</div>
				<div class="goodbye">Goodbye</div>
			</div>

위와 같은 HTML 태그가 존재할 때 아래 처럼 appendTo를 사용하게 되면 어떻게 될까요?

 $('.hello').clone().appendTo('.goodbye');
 

			<div class="container">
				<div class="hello">Hello</div>
				<div class="goodbye">
				Goodbye
					
					<div class="hello">Hello</div>
				</div>
			</div>

위와 같이 바뀌게 되는걸 확인할 수 있습니다.