jquery - 在新行中获取代码

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 中，这会自动发生，假设您要复制到的 HTMLtextarea在元素之间有换行符：

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

JS 小提琴演示

或者，使用val()：

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

JS 小提琴演示

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

white-space: pre-wrap;

这应该强制执行该行为，并防止空白折叠成单个空间。