Question

我有几个div，其中一个如下

<div id="drawarea">    
<img class="draggable ui-droppable ui-draggable ui-draggable-dragging" id="image1"     src="user_2/1323384165.jpg" style="height: 40%; width: 50%; position: absolute; left: 0%; top: 0%;">
<label id="first">This is content of the div</label>
<input type="button" value="GO"/>

</div>

我正在使用jquerys下面的函数来获取div中的html并放入文本区域

 html = $('#drawarea').html();

$('#codearea').text(html);

问题是我得到了同一行中的所有标签，我希望将一个元素代码放在一个元素代码中，然后将其他元素代码放在另一条线上，这样就很容易阅读。

Answer 1

<div id="drawarea">    
   <img class="draggable ui-droppable ui-draggable ui-draggable-dragging" id="image1"     src="user_2/1323384165.jpg" style="height: 40%; width: 50%; position: absolute; left: 0%; top: 0%;">
   <label id="first">This is content of the div</label>
   <input type="button" value="GO"/>
</div>

这是修复

rawhtml = $('#drawarea').html();
html = rawhtml.replace('<br />', /\n/g);
$('#codearea').text(html);

Answer 2

在Chrome 18 / Windows XP中，这会自动发生，假设您复制到textarea的HTML在元素之间有换行符：

$('#codearea').text($('#drawarea').html());

JS Fiddle demo

或者，使用val()：

$('#codearea').val($('#drawarea').html());

JS Fiddle demo

这可能取决于您的浏览器/平台，但要确保我已将textarea的CSS设置为：

white-space: pre-wrap;

应强制执行该行为，并防止空白区域折叠到单个空间中。

获取新行代码

2 个答案: