javascript - 使用appendTo()、insertAfter()等时如何包含换行符？

Question

假设我想向一个容器添加多个 DIV，就像这个过度简化示例一样:

for(var x=0; x<3; x++) {
  $("<div>"+x+"</div>").appendTo("#parent");
}

结果(当查看源代码时)将是这样的:

<div id="parent"><div>0</div><div>1</div><div>2</div></div>

类似地，$("#parent").html()的结果将是这样的:

<div>0</div><div>1</div><div>2</div>

但是如果我希望源代码看起来像这样怎么办:(不用介意适当的缩进)

<div id="parent">
<div>0</div>
<div>1</div>
<div>2</div>
</div>

这样 $("#parent").html() 的结果将是这样的:

<div>0</div>
<div>1</div>
<div>2</div>

我认为这会起作用，但换行符被忽略，并且无论如何也不会解释 [div id="parent"] 之后的第一个换行符。

for(var x=0; x<3; x++) {
  $("<div>"+x+"</div>\n").appendTo("#parent");
}

有什么建议吗？

换行格式的原因之一是生成的 HTML 需要逐行解析并转换为 XML 进行存储。让事情变得复杂的是，会有嵌套的 DIV，如下所示:

<div>
  <div>0</div>
  <div>1</div>
</div>
<div>
  <div>2</div>
</div>

如果没有换行符，上面的内容必须解析为:

<div><div>0</div><div>1</div></div><div><div>2</div></div>

如果解析上面的单行 HTML 比插入一堆换行符更容易，那么我会全力以赴地了解操作方法，并且实际上更喜欢这样做!

Answer 1

像这样吗？ http://jsfiddle.net/swm53ran/155/

(检查控制台)

<div id="parent">
</div>

$(document).ready(function() {
    var html = '';
    for(var x=0; x<3; x++) {
      html += "<div>" + x + "</div>\n";
    }
    $('#parent').append(html);
    console.log($("#parent").html());
});