jQuery는 DIV를 다른 DIV로 복제합니다.

100

DIV를 다른 DIV로 복사하고 이것이 가능하기를 바라는 jquery 도움이 필요합니다. 다음 HTML이 있습니다.

  <div class="container">
  <div class="button"></div>
  </div>

그리고 내 페이지의 다른 위치에 다른 DIV가 있고 '버튼'div를 다음 '패키지'div에 복사하고 싶습니다.

<div class="package">

Place 'button' div in here

</div>

javascript jquery html

— 단
소스

163

clone()요소의 전체 복사본을 얻으려면 메서드 를 사용하고 싶을 것입니다 .

$(function(){
  var $button = $('.button').clone();
  $('.package').html($button);
});

전체 데모 : http://jsfiddle.net/3rXjx/

로부터 의 jQuery 문서 :

.clone () 메서드는 일치하는 요소 집합의 전체 복사를 수행합니다. 즉, 일치하는 요소와 모든 하위 요소 및 텍스트 노드를 복사합니다. 삽입 메소드 중 하나와 함께 사용하면 .clone ()은 페이지에서 요소를 복제하는 편리한 방법입니다.

— chrx
소스

1

이것은 사용자가 입력에 추가 한 값을 유지하지 않습니다.

— wtf8_decode

6

우리가 필요로하는 이유를 말씀 해주십시오 수 $에서 var $button. 나는 js를 믿고 var를 간단히 선언 할 수 있습니다 var button.

— KNU

20

@KNU 필수는 아니지만 jQuery 세계에서 일반적인 관례입니다. $ button 변수가 jQuery 객체임을 나타냅니다. stackoverflow.com/questions/205853/…

— chrx

21

clone 및 appendTo 함수를 사용하여 코드 복사 :

다음은 jsfiddle 작업 예제 입니다.

<!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>

— 써니 SM
소스

3

이렇게 div를 복사 할 수 있습니다.

$(".package").html($(".button").html())

— JAVAGeek
소스

2

이벤트에 올려

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});

— 무하마드 레이 힐
소스

0

$(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>

스 니펫 확장

자세한 내용 및 데모

— 개발자
소스