将元素 HTML 附加到新附加的文本区域中

Question

我正在建立一个网站设计师，但遇到了一个烦人的问题。我做了一个小例子来说明我在这里想要完成的事情 - http://codepen.io/mikethedj4/pen/KqyaH

下面的代码在我的画布中抓取 html，在添加查询时将其放在文本区域中，当我单击已添加的媒体查询时，我可以看到该 html。

$(".list-of-media-queries").append("<div class='list-of-media-queries-container'><a href='javascript:void(0)' class='del-media-query'><span class='fa fa-times'></span></a> <button>"+ $(".cwidth").val() +"px</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ "@media all and (max-width:"+ $(".cwidth").val() +"px) { \n\n" + $(".dadammediaquery").val() +" }</pre>" +"</div><textarea class='"+ $(".cwidth").val() +"'>"+ $(".canves").html() +"</textarea>");

将全局样式添加到div.list-of-css-selectors 时，我会附加以下标签Textarea、DIV、Anchor、Button 和Pre。

这是附加内容的示例

<textarea class="custom-css-sheet hide" style="cursor:text!important; width:100%; resize:vertical; border:0; border-radius:0; min-height:200px;" placeholder="Your Custom CSS is added here"></textarea><div class="list-of-css-selectors-container"><a href="javascript:void(0)" class="del-global-css-style"><span class="fa fa-times"></span></a> <button>body</button><pre style="text-align:left; padding-top:5px; overflow:auto;">body {
  background-color: rgb(0, 224, 97);}</pre>
</div>

现在这就是我要备份的内容，也就是 the global/custom styles。我将所有内容存储在div.list-of-css-selectors 中，因此我将代码（见下文第二个）更新到我想要备份的位置。现在div.list-of-css-selectors 内部的代码假设进入新添加的文本框，该文本框在添加时具有媒体查询位置的类。但是，代码并未包含在 textarea 中。这就是我得到的。

<textarea class="custom-css-sheet hide" style="cursor:text!important; width:100%; resize:vertical; border:0; border-radius:0; min-height:200px;" placeholder="Your Custom CSS is added here">

我不确定它为什么会有这种反应。如果有人可以提供帮助，将不胜感激。

$(".list-of-media-queries").append("<div class='list-of-media-queries-container'><a href='javascript:void(0)' class='del-media-query'><span class='fa fa-times'></span></a> <button>"+ $(".cwidth").val() +"px</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ "@media all and (max-width:"+ $(".cwidth").val() +"px) { \n\n" + $(".dadammediaquery").val() +" }</pre>" +"</div><textarea class='"+ $(".cwidth").val() +"'>"+ $(".list-of-css-selectors").html() +"</textarea>");

Answer 1

使用 val() 设置 textarea 的值

var string = "your html content";

var textarea=$('<textarea>').val( string).appendTo( containerSelector);