Можно ли клонировать объекты элементов html в JavaScript / JQuery?

102

Я ищу несколько советов, как решить мою проблему.

У меня есть элемент html (например, поле ввода поля выбора) в таблице. Теперь я хочу скопировать объект и сгенерировать новый из копии, причем с помощью JavaScript или jQuery. Я думаю, что это должно как-то сработать, но сейчас я немного не понимаю.

Примерно так (псевдокод):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();
Ричард
источник
3
stackoverflow.com/search?q=jquery+copy+element+content имеет множество связанных вопросов.
Феликс Клинг,

Ответы:

61

Используя свой код, вы можете сделать что-то подобное на простом 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
Борис Гери
источник
30
ОЧЕНЬ важно изменить идентификатор при клонировании элемента.
Dragos Durlut
287

С собственным JavaScript:

newelement = element.cloneNode(bool)

где логическое значение указывает, следует ли клонировать дочерние узлы или нет.

Вот полная документация по MDN .

аннаката
источник
52
лучший ответ. не используйте jquery там, где он вам не нужен.
luschn
Выглядит неплохо ... но совместимость с браузерами на сегодняшний день под вопросом.
Аникет Сурьяванши
14
@AniketSuryavanshi Я не уверен насчет 4 февраля в частности, но совместимость сегодня выглядит идеально
2
Идентификаторы и имена будут дублироваться. ID НЕОБХОДИМО изменить, имена МОЖНО оставить как есть, если ожидается дублирование имен.
przemo_li
Жаль, что вы теряете все атрибуты: /
Питер Де Би
16

Да, вы можете скопировать дочерние элементы одного элемента и вставить их в другой элемент:

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

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

Доказательство: http://jsfiddle.net/de9kc/

Тадек
источник
Повторяющиеся идентификаторы будут проблемой с вашим подходом
przemo_li
4

На самом деле в jQuery это очень просто:

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

Измените .appendTo (), конечно ...

Филипп Лейберт
источник
2

Вы можете использовать метод clone () для создания копии ..

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

FIDDLE ЗДЕСЬ

Сушант -
источник
1

Попробуй это:

$('#foo1').html($('#foo2').children().clone());
Оскар Хара
источник
0

В одной строке:

$('#selector').clone().attr('id','newid').appendTo('#newPlace');
Тамаш Чинеге
источник
1
Я не думаю, что это поможет, поскольку значение вашего атрибута - это строка, которая не изменится.
Джейми Ритлевски
0

Вам нужно выбрать "# 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/

Франц Ноэль
источник