Comment insérer un élément cloné avec une chaîne de balisage HTML?

Question

Je suis dans le besoin de cloner une div puis l'ajouter à un autre endroit. Le DIV est ressemble à ceci.

<div id="clonableContet" class="clonableClass"> 
<input id="Name" class="clonableInput" type="text"/> 
<input id="Age" class="clonableInput" type="text"/> 
</div> 

<div id="clonedContentHolder"></div> 

Si je clone clonableContent et l'ajouter dans clonaedContentHolder, il contient le même ID que le précédent. Je souhaite modifier dynamiquement l'attribut id contenu div's cloné. Mais je peux ajouter dynamiquement le nouveau nom de classe aux éléments input clonés. Je suis bon avec ça. Je serai en mesure d'obtenir les valeurs avec une référence de nom de classe.

Mais mon problème est que je veux que le dernier contenu cloné soit visible. Car, tous ces div's sont des contenus d'onglets. Je ne suis pas en mesure de changer l'ID div clonableContent.

J'ai essayé de créer dynamiquement une autre div, et de mettre la div clonée dedans. Son comme ceci,

var html = "<div id='clonedContent" + count + "'>" + clonedContent + "</div>"; 

Mais la sortie est [Object] [Object]. cloned div, devient objet dans la chaîne.

Comment insérer le contenu clonedContent dans une chaîne comme une autre chaîne?

Ou, existe-t-il un autre moyen d'obtenir la même solution?

Merci d'avance.

Answer 1

créer le code HTML en tant que tel:

var html = $("<div />").attr('id', 'clonedContent'+count).html(clonedContent); 

Ensuite, vous pouvez utiliser HTML comme un objet jquery et ajoutez comme le dernier élément en tant que tel:

html.appendTo('div:last'); 

Answer 2

La meilleure façon que j'ai trouvé pour ce faire est de append l'objet d'un objet existant jQuery:

var html = $("<div id='clonedContent" + count + "' />").append(clonedContent); 

Answer 3

non jQuery Solu tion:

var div = document.createElement("div"); //create a new div 
div.id="clonedContent" + count; // set the id with your counter 
div.appendChild(clonedContent); //add the DOM reference you have 
document.getElementById("clonedContentHolder").appendChild(div); //add the content to div on page