Est-il possible de cloner des objets d'élément html en JavaScript / JQuery?
Je cherche quelques conseils sur la façon de résoudre mon problème.
J'ai un élément html (comme le champ de saisie select box) dans une table. Maintenant, je veux copier l'objet et en générer un nouveau à partir de la copie, et cela avec JavaScript ou jQuery. Je pense que cela devrait fonctionner en quelque sorte, mais je suis un peu désemparé en ce moment.
Quelque chose comme ceci (pseudo code):
oldDdl = $("#ddl_1").get();
newDdl = oldDdl;
oldDdl.attr('id', newId);
oldDdl.html();
8 réponses
La manière jQuery (pas la plus efficace):
Regardez la méthode clone () de JQuery
En utilisant votre code, vous pouvez faire quelque chose comme ça:
$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want
Avec JavaScript natif:
newelement = element.cloneNode(bool)
Où le booléen indique s'il faut cloner des nœuds enfants ou non.
Oui, vous pouvez copier les enfants d'un élément et de les coller dans l'autre élément:
var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');
foo1.html(foo2.children().clone());
Preuve: http://jsfiddle.net/de9kc/
C'est en fait très facile dans jQuery:
$("#ddl_1").clone().attr("id",newId).appendTo("body");
Changement .appendTo () bien sûr...
Vous pouvez utiliser clone() méthode pour créer une copie..
$('#foo1').html( $('#foo2 > div').clone());
Essayez ceci:
$('#foo1').html($('#foo2').children().clone());
Dans une ligne:
$('#selector').clone().attr('id','newid').appendTo('#newPlace');
Vous devez sélectionner "#foo2" comme sélecteur. Ensuite, obtenez-le avec html ().
Voici le html:
<div id="foo1">
</div>
<div id="foo2">
<div>Foo Here</div>
</div>
Voici le javascript:
$("#foo2").click(function() {
//alert("clicked");
var value=$(this).html();
$("#foo1").html(value);
});
Voici le jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/