設置文本框內的文本複製div

Question

我有一個主div，其中包含多個div和文本框內。在該文本框內用戶鍵入內容。

用戶完成輸入內容後，我複製整個主div。但是，當我複製主div時，我只能複製除了文本框內的所有內容。

我這樣做的方式是在javascript中複製主div的html。如果有人能幫助我，我將不勝感激。

大師事業部是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(); 

在添加此代碼，模仿的div：

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

你實際上並沒有用它做任何事情。

您也無法複製ID。我會用jQuery重建新系統中的div，而不是簡單地將html從一個複製到另一個。

編輯：

我已經包含了一個例子的jsfiddle爲你檢查。如果你想保持一切都一樣，你可以簡單地使用.find（）來獲取文本區域並設置信息。

http://jsfiddle.net/EqaLw/

Answer 2

爲您所使用的地方jQuery - 你有沒有試過使用.clone()方法？

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

也正在創建這是不允許有重複id屬性的div。上述

頁解釋瞭如何使用克隆（），並建議：

注意：使用.clone（）有生產具有重複的ID屬性，這應該是獨特的元素的副作用。在可能的情況下，建議避免使用此屬性克隆元素，或者使用類屬性作爲標識符。