반응형
jQuery는 DIV를 다른 DIV로 복제합니다.
DIV를 다른 DIV로 복사하고 이것이 가능하기를 바라는 jquery 도움이 필요합니다. 다음 HTML이 있습니다.
<div class="container">
<div class="button"></div>
</div>
그리고 내 페이지의 다른 위치에 또 다른 DIV가있는 '버튼'div를 다음 '패키지'div에 복사하고 싶습니다.
<div class="package">
Place 'button' div in here
</div>
clone()요소의 전체 복사본을 얻으려면 메서드 를 사용하고 싶을 것입니다 .
$(function(){
var $button = $('.button').clone();
$('.package').html($button);
});
전체 시험 : http://jsfiddle.net/3rXjx/
로부터 의 jQuery 문서 :
.clone () 메서드는 일치하는 요소 집합의 전체 복사를 수행합니다. 즉, 일치하는 요소와 모든 하위 요소 및 텍스트 노드를 복사합니다. 삽입 메소드 중 하나와 함께 사용하면 .clone ()은 페이지에서 요소를 복제하는 방법입니다.
clone 및 appendTo 함수를 사용하여 코드 복사 :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="copy"><a href="http://brightwaay.com">Here</a> </div>
<br/>
<div id="copied"></div>
<script type="text/javascript">
$(function(){
$('#copy').clone().appendTo('#copied');
});
</script>
</body>
</html>
이벤트에 올려
$(function(){
$('.package').click(function(){
var content = $('.container').html();
$(this).html(content);
});
});
이렇게 div를 복사 할 수 있습니다.
$(".package").html($(".button").html())
$(document).ready(function(){
$("#btn_clone").click(function(){
$("#a_clone").clone().appendTo("#b_clone");
});
}); .container{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}<!DOCTYPE html>
<html>
<head>
<title>jQuery Clone Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<p id="a_clone"><b> This is simple example of clone method.</b></p>
<p id="b_clone"><b>Note:</b>Click The Below button Click Me</p>
<button id="btn_clone">Click Me!</button>
</div>
</body>
</html> 참고 URL : https://stackoverflow.com/questions/16068047/jquery-duplicate-div-into-another-div
반응형
'IT' 카테고리의 다른 글
| Spring @PostConstruct 대 init-method 속성 (0) | 2020.09.03 |
|---|---|
| R에서 길이가 0 인 숫자 형 벡터를 만드는 방법 (0) | 2020.09.03 |
| 컨트롤러에 매개 변수없는 공개 생성자 오류가 있는지 확인 (0) | 2020.09.03 |
| getElementsByClassName의 배열에서 forEach를 사용하면 "TypeError : undefined is not a function"이 발생합니다. (0) | 2020.09.03 |
| PNG에 JPG와 같은 EXIF 데이터가 포함되어 있습니까? (0) | 2020.09.03 |