SeouliteLab

jQuery의 .clone() 메서드를 활용한 요소 복제 본문

프로그래밍

jQuery의 .clone() 메서드를 활용한 요소 복제

Seoulite Lab 2024. 4. 5. 10:09

jQuery의 .clone() 메서드는 선택한 요소를 복제하여 새로운 요소로 만드는 기능을 제공합니다. 이를 통해 원본 요소의 구조와 속성을 그대로 유지한 채로 동적으로 요소를 생성할 수 있습니다. 아래는 .clone() 메서드를 사용한 다양한 예제와 설명입니다.

예제 1: 기본적인 사용법

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .clone() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="original">
  <p>원본 요소</p>
</div>

<script>
$(document).ready(function(){
  var clonedElement = $("#original").clone();
  $("#original").after(clonedElement);
});
</script>

</body>
</html>

출력 결과:

<div id="original">
  <p>원본 요소</p>
</div>
<div>
  <p>원본 요소</p>
</div>

설명:

  • #original 요소를 복제하여 새로운 요소를 생성합니다.
  • 이후 원본 요소 뒤에 복제된 요소가 추가됩니다.

예제 2: 복제된 요소 수정

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .clone() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="original">
  <p>원본 요소</p>
</div>

<script>
$(document).ready(function(){
  var clonedElement = $("#original").clone();
  clonedElement.find("p").text("변경된 요소");
  $("#original").after(clonedElement);
});
</script>

</body>
</html>

출력 결과:

<div id="original">
  <p>원본 요소</p>
</div>
<div>
  <p>변경된 요소</p>
</div>

설명:

  • #original 요소를 복제하여 새로운 요소를 생성합니다.
  • 복제된 요소 내의 <p> 요소의 텍스트를 변경합니다.

예제 3: 복제된 요소 이벤트 처리

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .clone() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="originalBtn">클릭하세요</button>

<script>
$(document).ready(function(){
  $("#originalBtn").click(function(){
    alert("원본 버튼 클릭");
  });

  var clonedButton = $("#originalBtn").clone();
  clonedButton.click(function(){
    alert("복제된 버튼 클릭");
  });

  $("#originalBtn").after(clonedButton);
});
</script>

</body>
</html>

출력 결과: (클릭 시 각각의 알림 창이 나타남)

<button id="originalBtn">클릭하세요</button>
<button>클릭하세요</button>

설명:

  • #originalBtn 버튼을 복제하여 새로운 버튼을 생성합니다.
  • 원본 버튼과 복제된 버튼 각각에 클릭 이벤트를 추가합니다.

예제 4: 복제된 요소를 다른 위치에 추가

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .clone() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="container">
  <p>원본 요소</p>
</div>

<div id="anotherContainer"></div>

<script>
$(document).ready(function(){
  var clonedElement = $("#container").clone();
  $("#anotherContainer").append(clonedElement);
});
</script>

</body>
</html>

출력 결과:

<div id="container">
  <p>원본 요소</p>
</div>
<div id="anotherContainer">
  <div>
    <p>원본 요소</p>
  </div>
</div>

설명:

  • #container 요소를 복제하여 새로운 요소를 생성합니다.
  • 복제된 요소를 다른 위치인 #anotherContainer 내에 추가합니다.

예제 5: 특정 속성 제거 후 복제

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .clone() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<a href="#" id="originalLink">원본 링크</a>

<script>
$(document).ready(function(){
  var clonedLink = $("#originalLink").clone();
  clonedLink.removeAttr("id");
  $("#originalLink").after(clonedLink);
});
</script>

</body>
</html>

출력 결과:

<a href="#" id="originalLink">원본 링크</a>
<a href="#">원본 링크</a>

설명:

  • #originalLink 링크를 복제하여 새로운 링크를 생성합니다.
  • 복제된 링크에서 id 속성을 제거한 후 원본 링크 뒤에 추가합니다.
저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

JDK 25의 새로운 기능 살펴보기: 패턴 매칭과 편의성 강화  (0) 2024.04.05
jQuery의 .detach() 메서드를 활용한 요소 제거  (0) 2024.04.05
jQuery의 .before() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .appendTo() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .after() 메서드를 활용한 요소 삽입  (0) 2024.04.05
'프로그래밍' Related Articles more