[HTML_CSS] JQ - clone() 메서드 - 선택요소 복사본 만들기 (= 선택요소복사 = clone메서드 = 클론메서드) ※ 지정 횟수 만큼 복사 반복

목차

1. clone() 예제 - 선택요소 복사만 하기
2. clone() 예제 - 선택요소 복사 / 클릭시 요소글자확대
3. clone() 예제 - a 클릭 시 (a기본동작차단 및 선택요소복사)
4. clone() 예제 - for 반복문으로 지정 횟수만큼 복사

clone() 예제 - 선택요소 복사만 하기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").clone().appendTo("body");

  });

});

</script>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

<button>클릭</button>

 

결과보기

clone() 예제 - 선택요소 복사 / 클릭시 요소글자확대

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("body").append($("p:first").clone(true));

  });

  $("p").click(function(){

    $(this).animate({fontSize: "+=1px"});

  });

});

</script>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

<button>클릭</button>

 

결과보기

clone() 예제 - a 클릭 시 (a기본동작차단 및 선택요소복사)

 

<meta charset="utf-8">

<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>

<script>

$(function() {

var menus = [];

$("a").on("click", function(e) {

    e.preventDefault();

    $(this).parent().clone().insertAfter($("#result"));

    menus.unshift($(this).data("idx"));

    console.log(menus);

});

});

</script>

<ol>

    <li><a href="#" data-idx="1">1. HTML</a></li>

    <li><a href="#" data-idx="2">2. CSS</a></li>

    <li><a href="#" data-idx="3">3. JS</a></li>

    <li><a href="#" data-idx="4">4. JQ</a></li>

    <li><a href="#" data-idx="5">5. PHP</a></li>

    <li><a href="#" data-idx="6">6. SQL</a></li>

</ol>

<ol id="result"></ol>

 

결과보기

왕계란 님 (191017) https://sir.kr/qa/327813

clone() 예제 - for 반복문으로 지정 횟수만큼 복사

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<div class="hz">홈짱닷컴 Homzzang.com</div>

<script>

$(function() {

  for (i = 0; i < 30; i++) {

      $('.hz').clone().appendTo('body');

  }

});

</script>

 

마르스컴퍼니 님 (220617) https://sir.kr/qa/464290