เป็นไปได้ไหมที่จะโคลนวัตถุองค์ประกอบ html ใน JavaScript / JQuery

ฉันกำลังมองหาเคล็ดลับในการแก้ปัญหาของฉัน

ฉันมีองค์ประกอบ html (เช่นช่องใส่กล่องเลือก) ในตาราง ตอนนี้ฉันต้องการคัดลอกวัตถุและสร้างวัตถุใหม่จากการคัดลอกและด้วย JavaScript หรือ jQuery ฉันคิดว่ามันน่าจะได้ผล แต่ตอนนี้ฉันยังไม่รู้เรื่องเล็กน้อย

สิ่งนี้ (รหัสหลอก):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

การใช้โค้ดของคุณคุณสามารถทำสิ่งนี้ใน JavaScript ธรรมดาโดยใช้วิธีcloneNode () :

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