Question

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

下面的代码抓取我画布中的html，在添加查询时将其放入textarea中，当我点击已添加的媒体查询时，我可以看到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>

现在这就是我尝试备份aka the global/custom styles的原因。我已将所有内容存储在div.list-of-css-selectors中，因此我将我的代码（第2次见下文）更新到我想要备份的位置。现在，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);

将元素HTML附加到新附加的textarea中

1 个答案: