Чи можливо клонувати об’єкти 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())​;

ПЕРЕГЛЯД ТУТ

Спробуйте це:

$('#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>​

Ось javascript:

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

Ось jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/