목차
- clone() 예제 - 선택요소 복사만 하기
- clone() 예제 - 선택요소 복사 / 클릭시 요소글자확대
- clone() 예제 - a 클릭 시 (a기본동작차단 및 선택요소복사)
- 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
