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


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

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

что-то вроде этого (псевдо код):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();
8 77

8 ответов:

путь jQuery (не самый эффективный):

посмотреть clone () метод JQuery

используя ваш код, вы можете сделать что-то вроде этого:

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

с родным JavaScript:

newelement = element.cloneNode(bool)

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

вот полная документация по 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/