Wie fügt man geklontes Element mit in HTML Markup String ein?

Question

Ich brauche ein Klonen ein div und dann fügen Sie es an einem anderen Ort an. Das DIV sieht so aus.

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

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

Wenn i clonableContent klonen und hängen sie in clonaedContentHolder, enthält sie die gleiche ID wie die vorherige. Ich möchte das geklonte Content div's ID-Attribut dynamisch ändern. Aber ich bin in der Lage, dynamisch den geklonten input Elementen einen neuen Klassennamen hinzuzufügen. Ich bin gut damit. Ich werde die Werte mit einer Klassennamenreferenz erhalten können.

Aber mein Problem ist, ich möchte letzten klonierten Inhalt sichtbar machen. Denn alle diese div's sind Tab-Inhalte. Ich bin nicht in der Lage, die clonableContent div's ID zu ändern.

Ich habe versucht, ein anderes div dynamisch zu erstellen, und legte das geklonte div darin. Es ist so,

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

Aber die Ausgabe ist [Objekt] [Objekt]. cloned div, wird zum Objekt innerhalb des Strings.

Wie soll ich den geklonten Inhalt innerhalb einer Zeichenfolge als eine andere Zeichenfolge einfügen?

Oder gibt es eine andere Möglichkeit, die gleiche Lösung zu erhalten.

Vielen Dank im Voraus.

Answer 1

erstellen die HTML als solche:

html.appendTo('div:last'); 

Answer 2

Der beste Weg, die ich gefunden habe:

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

Dann können Sie HTML als jQuery-Objekt und fügen Sie als das letzte Element als solche nutzen können dies zu tun ist, um das Objekt zu einem bestehenden jQuery-Objekt append:

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