我有一个主 div,其中包含多个 div 和一个文本框。在该文本框中,用户键入内容。
用户完成输入内容后,我将复制整个主 div。但是当我复制主 div 时,我只能复制除里面文本框内容之外的所有内容。
我这样做的方法是在 javascript 中复制主 div 的 html。如果有人可以帮助我,我将不胜感激。
Master 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);
}