Установить текст текстового поля внутри дублированного div

Question

У меня есть главный div, который содержит несколько div и текстовое поле внутри. Внутри этого текстового поля пользователь вводит контент.

После того, как пользователь закончил ввод содержимого, я дублирую весь мастер-div. Но когда я дублирую мастер-div, я могу только дублировать все, кроме содержимого текстового поля внутри.

Как я это сделал, это копирование html главного div в javascript. Буду признателен, если кто-нибудь сможет мне помочь.

Мастер Div является createmain1 здесь

<div id="createmain1" class="createmainclass1"> 
    <div id="leftbox1"> 
    <!--<p>the preview left div</p>--> 
    <div id="createmain1leftframe1" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
     <div id="createmain1leftframe2" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
     <div id="createmain1leftframe3" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
      <div id="createmain1leftframe4" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
      <textarea id="lefttext1" spellcheck="true" maxlength="500" wrap="hard" style="width: 100%; font-family: 'GillSansLightRegular'; overflow:hidden; resize:none; font-size:20px; border:none; height: 100%; background-color:transparent" placeholder="Enter Text Here"></textarea> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div id="rightbox1"> 
    <!--<p>the preview right div</p>--> 
    <div id="createmain1rightframe1" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
     <div id="createmain1rightframe2" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
     <div id="createmain1rightframe3" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
      <div id="createmain1rightframe4" style="height: 100%; background-repeat: no-repeat; width: 100%;"> 
      <textarea id="righttext1" spellcheck="true" maxlength="500" wrap="hard" style="width: 100%; font-family: 'GillSansLightRegular'; overflow:hidden; resize:none; font-size:20px; border:none; height: 100%; background-color:transparent" placeholder="Enter Text Here"></textarea> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Место, где я дублируя это

<div id="finalimage" style="background-color:lightcoral" ></div> 

JavaScript, что я написал это

$("#Preview").click(function() { 
    var firstdiv = $("#createmain1").html(); 
    var lefttext = $("#lefttext1").val(); 
    $("#finalimage").css("height", "310px"); 
    $("#finalimage").css("width", "460px"); 
    $("#finalimage").html(firstdiv); 
    $("#finalimage").children("#leftbox1").css("height", "300px"); 
    $("#finalimage").children("#leftbox1").css("width", "225px"); 
    $("#finalimage").children("#leftbox1").css("float", "left"); 
    $("#finalimage").children("#rightbox1").css("height", "300px"); 
    $("#finalimage").children("#rightbox1").css("width", "225px"); 
    $("#finalimage").children("#rightbox1").css("float", "left"); 
    $("#finalimage").children("#lefttext1").val(lefttext); 
} 

Answer 1

То, что выглядит, как это происходит, что вы захватывая первый DIV здесь:

var firstdiv = $("#createmain1").html(); 

Добавьте этот код в эмулировать дивы:

$("#finalimage").html(firstdiv); 

И вы на самом деле не что-то с этим делать.

Вы также не можете копировать идентификаторы. Я бы перестроил divs в новой системе с помощью jQuery, а не просто копировал html из одного в другой.

EDIT:

Я включил jsfiddle пример для вас, чтобы проверить. Если вы хотите сохранить все одинаково, вы можете просто использовать .find() для захвата текстовой области и установки информации.

http://jsfiddle.net/EqaLw/

Answer 2

как вы используете jQuery - вы пробовали использовать .clone() метод?

http://api.jquery.com/clone/

также вы создаете дивы с повторяющимся атрибутом id который не допускается.

страница выше объясняет, как использовать клон() и рекомендует:

Примечание: Использование .clone() имеет побочный эффект производства элементов с одинаковыми атрибутами Ид, которые, как предполагается, должны быть уникальными. Там, где это возможно, рекомендуется избегать клонирования элементов с этим атрибутом или вместо этого использовать атрибуты класса.