摘要：虽然效果一样，但是这两种换行的方式使用起来却不同。使用换行这种方式用起来比较坑，所以本文章的重点就是这一部分。因为之前知道弹框中要实现换行，只能通过的方式，而不能通过的方式。在元素上使用等方式，发现都是可以实现换行的。
前言
最近遇到这样一个需求：
需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义，我们负责显示在页面即可，第三方要求这些文本需要换行显示即可。
我们都知道在 HTML 中，用标签可以实现换行，转义字符 也可以实现换行。虽然效果一样，但是这两种换行的方式使用起来却不同。
1.使用换行这种方式使用起来比较简单，用 jQuery.html( )方法即可。
示例：
var content = "您确定要删除这行代码吗？";
$("body").html(content);
结果如下：
但是很多时候这种方法用起来比较危险。比如你需要在页面中显示一段第三方文本信息，由于文本来自第三方，很有可能被插入了恶意的script 脚本，如果用 html( )方法来显示这些文本，那很有可能被攻击。当然还有一个更加理所当然但是稍微费事的方法，那就是利用正则匹配将所有 替换为，将所有其他 HTML 特殊字符（如<、>、&等)替换为转义字符串（也称字符实体(Character Entity)），这时候就可以用 $.html( )方法解决了！当然更好的方法应该是通过解析纯文本的方法如 text( )来显示这些文本。
2.使用 换行这种方式用起来比较坑，所以本文章的重点就是这一部分。
因为之前知道 alert 弹框中要实现换行，只能通过
的方式，而不能通过的方式。
示例：
var content = "您确定要删除这行代码吗？"; alert(content);
结果为：
可以看到，通过的方式并没法实现换行。
(2) alert 弹框使用 换行结果示例：
var content = "您确定要删除 这行代码吗？"; alert(content);
结果为：
(3) .innerHTML/ html( )方法中使用 换行结果对于大多数HTML元素，不管是原生的 innerHTML属性还是 jQuery的 html( )方法都不能实现换行。但也有例外，比如下文介绍的textarea,pre元素。
示例：
var content = "您确定要删除
这行代码吗？";
//$("body").html(content);
document.getElementsByTagName("body")[0].innerHTML=content;
结果如下：
发现了吗，本来的换行符变成了空格！
我想原因应该是这样的：在字符串中的
其实和你在字符串中输入 enter 键换行的效果是一样的，在 HTML 里多于一个空格都按照一个空格显示，所以原本的换行符就变成了一个空格。但其实这个换行符依然在 HTML 中，此时你用 console.log($("body").html( ))查看，你会看到控制台打印出来的字符串是有空行效果的。
奇怪的事情发生了，用 jQuery 的 text( )方法无法换行（对于大多数元素结果是如此，但也有例外，比如下文介绍的textarea,pre元素。），但使用原生的 innerText 属性居然就能实现换行了！
示例1：
var content = "您确定要删除
这行代码吗？";
$("body").text(content);
结果如下：
示例2：
var content = "您确定要删除
这行代码吗？";
document.getElementsByTagName("body")[0].innerText=content;
结果如下：
顿时觉得好开心，终于找到一个通过
来实现换行的方法了！
可是突然就开心不起来了，因为 firefox 不支持 innerText 属性，它有另外一个对应的属性 textContent，那它是否支持通过
来换行呢？
示例3：
var content = "您确定要删除
这行代码吗？";
document.getElementsByTagName("body")[0].textContent=content;
结果如下：
和示例1一样的结果，还是不能实现换行。。。。
所以通过 innerText 这种方式只能支持除 firefox 外的浏览器，并不是完美的解决方案。
我们知道pre标签是一个特殊的标签，标签中文本的所有空格和换行符都会被保留。在pre元素上使用 html( )/innerHTML/text( )/innerText等方式，发现都是可以实现换行的。
示例1：
您确定要删除 这行代码吗？您确定要删除 这行代码吗？
示例2：
var content = "您确定要删除
这行代码吗？";
//以下方法都是可以实现换行的
document.getElementsByTagName("pre")[0].innerHTML=content;
document.getElementsByTagName("pre")[0].innerText=content;
$("pre").html(content);
$("pre").text(content);
(6)利用 textarea 元素使用
换行结果
报着试一试的态度，我尝试了下通过设置 textarea 元素的 value 属性来实现换行，发现居然真实现了！于是我还尝试在textarea 元素上使用 html( )/innerHTML/text( )/innerText等方式，发现都是可以实现的！！
示例：
var content = "您确定要删除
这行代码吗？";
document.getElementsByTagName("textarea")[0].value=content;//可以实现
document.getElementsByTagName("textarea")[0].innerHTML=content;
document.getElementsByTagName("textarea")[0].innerText=content;
$("textarea").html(content);
$("textarea").text(content);
$("textarea").val(content);
结果如下：
回到开头说的那个需求，因为网页中只需要展示第三方文本信息，所以可以使用一个 textarea 来代替原本的 div之类的进行展示。那么问题来了，我们希望的是仅展示，并不能被编辑，textarea 元素默认是可以被编辑的，怎么破呢？这个简单，给 textarea 元素加上 readonly属性就解决啦~~
结语看来在使用 方式实现换行时，是否能用html()/innerHTML/text()/innerText，取决于在哪个 HTML 元素上使用这些方法。对于那些会保留纯文本中原有空格、换行符的 HTML 元素如、