设置文本框内的文本复制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属性，这应该是独特的元素的副作用。在可能的情况下，建议避免使用此属性克隆元素，或者使用类属性作为标识符。