복사 메서드 : clone

조수경·2021년 11월 25일
0

HTML

목록 보기
84/96

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script>
 $(function(){
	 $('.pp').on('click', function(){
		 
		 $(this).css('font-size', '+=3px');
	 })
	 
	 $('#clone').on('click', function(){
	     vp1 = $('#p1').clone()	 
	     
	     $('#result1').append(vp1);
	 })
	 
	 $('#eclone').on('click', function(){
		 vp2 = $('#p2').clone(true);
		 
		 vp2.appendTo($('#result2'));
		 
	 })
 })
</script>

</head>
<body>

<div class = "box">
   clone : 이벤트 처리기는 복사되지 않고 요소만 단순 복사된다<br>
   clone(true) : 복사 시 이벤트 처리기가 함께 복사된다<br>
   <br>
   <p class="pp" id ="p1">무궁화 꽃이 피었습니다1</p>
   <p class="pp" id ="p2">무궁화 꽃이 피었습니다2</p>
  <button type = "button" id="clone">복사</button>
  <button type = "button" id="eclone">이벤트복사</button>
  <div id = "result1"></div>
  <div id = "result2"></div>
</div>
</body>
</html>

profile
신입 개발자 입니다!!!

0개의 댓글