如何在HTML標記字符串中插入克隆的元素？

Question

我需要克隆一個div，然后將其附加到另一個位置。 DIV看起來像這樣。

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

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

如果我克隆clonableContent並在其追加clonaedContentHolder ，它包含相同的ID與前一個。 我想動態更改克隆的Content div's id屬性。 但是我能夠向克隆的input元素動態添加新的類名。 我很好 我將能夠使用一些類名引用來獲取值。

但我的問題是我希望使最后克隆的內容可見。 因為，所有這些div's都是選項卡內容。 我無法更改clonableContent div的ID。

我試圖動態創建另一個div，然后將克隆的div放入其中。 就像這樣，

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

但是輸出是[Object] [Object]。 克隆的div，成為String中的對象。

如何將clonedContent插入字符串中作為另一個字符串？

或者，還有其他方法可以得到相同的解決方案。

提前致謝。

Answer 1

這樣創建html：

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

然后，您可以將html用作jquery對象，並附加到最​​后一項，例如：

html.appendTo('div:last');

Answer 2

我發現做到這一點的最好方法是append對象append到現有的jQuery對象上：

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

Answer 3

非JQuery解決方案：

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