JavaScript / JQuery에서 html 요소 객체를 복제 할 수 있습니까?

내 문제를 해결하는 방법에 대한 몇 가지 팁을 찾고 있습니다.

테이블에 html 요소 (예 : 선택 상자 입력 필드)가 있습니다. 이제 객체를 복사하고 사본에서 새 객체를 생성하고 JavaScript 또는 jQuery를 사용합니다. 나는 이것이 어떻게 든 작동해야한다고 생각하지만 지금은 약간 단서가 없습니다.

다음과 같은 것 (의사 코드) :

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

코드를 사용하면 cloneNode () 메서드를 사용하여 일반 JavaScript에서 다음과 같은 작업을 수행 할 수 있습니다 .

// Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

// Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

// Append the newly created element on element p 
document.querySelector('p').appendChild( clone );

또는 jQuery clone () 메서드 사용 (가장 효율적이지 않음) :

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want

네이티브 JavaScript 사용 :

newelement = element.cloneNode(bool)

여기서 부울은 자식 노드를 복제할지 여부를 나타냅니다.

다음은 MDN에 대한 전체 문서입니다 .

예, 한 요소의 자식을 복사하여 다른 요소에 붙여 넣을 수 있습니다.

var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());

증명 : http://jsfiddle.net/de9kc/

실제로 jQuery에서는 매우 쉽습니다.

$("#ddl_1").clone().attr("id",newId).appendTo("body");

물론 .appendTo () 변경 ...

clone () 메서드를 사용하여 복사본을 만들 수 있습니다 .

$('#foo1').html( $('#foo2 > div').clone())​;

여기에 FIDDLE

이 시도:

$('#foo1').html($('#foo2').children().clone());

한 줄로 :

$('#selector').clone().attr('id','newid').appendTo('#newPlace');

선택기로 "# foo2"를 선택해야합니다. 그런 다음 html ()로 가져옵니다.

다음은 html입니다.

<div id="foo1">

</div>
<div id="foo2">
    <div>Foo Here</div>
</div>​

다음은 자바 스크립트입니다.

$("#foo2").click(function() {
    //alert("clicked");
    var value=$(this).html();
    $("#foo1").html(value);
});​

다음은 jsfiddle입니다. http://jsfiddle.net/fritzdenim/DhCjf/