• Q&A
  • 회원가입
  • 로그인

[HTML_CSS] JQ - clone() 메서드 - 선택요소 복사본 만들기 (= 선택요소복사)

172  

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>

 

결과보기

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

 


찾아주셔서 감사합니다. Since 2012