javascript - 为什么 jQuery 的 append 回车输出不一致？

Question

下面的例子演示了这个问题:

$("#ex1").append("\r"); //This one works as expected
$("#ex2").append("\n"); //This also works as expected
$("#ex3").append("\r\n"); //This also works as expected
$("#ex4").append("\r <el></el>"); //This replaces \r with \n
$("#ex5").append("\r\n <el></el>"); //This removes \r completely

$("div").on("click", function() { 
    alert(JSON.stringify(this.innerHTML)); 
});

<!-- Note: this also works in the JQuery 2.0 branch -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Click the divs below to see the result.
<div id="ex1">R: </div>
<div id="ex2">N: </div>
<div id="ex3">RN: </div>
<div id="ex4">R + El: </div>
<div id="ex5">RN + El: </div>

为什么 jQuery 的 append 的回车输出不一致？

直接使用 DOM，附加文本节点等，\r 被保留(至少在 Chrome 和 Linux 上):

document.getElementById("ex1").appendChild(document.createTextNode("\r"));

document.getElementById("ex2").appendChild(document.createTextNode("\n"));

document.getElementById("ex3").appendChild(document.createTextNode("\r\n"));

document.getElementById("ex4").appendChild(document.createTextNode("\r "));
document.getElementById("ex4").appendChild(document.createElement('el'));

document.getElementById("ex5").appendChild(document.createTextNode("\r\n "));
document.getElementById("ex5").appendChild(document.createElement('el'));

document.addEventListener("click", function(e) {
    if (/^ex\d$/.test(e.target.id)) {
        alert(JSON.stringify(e.target.innerHTML));
    }
}, false);

<!-- Note: this also works in the JQuery 2.0 branch -->
Click the divs below to see the result.
<div id="ex1">R: </div>
<div id="ex2">N: </div>
<div id="ex3">RN: </div>
<div id="ex4">R + El: </div>
<div id="ex5">RN + El: </div>

Answer 1

http://jsfiddle.net/19gc7pjt/3/

这不是 jQuery 的问题。

我认为是 javascript 相关的浏览器问题。

(IE 使用 '\r'，其他使用 '\n'。顺便说一句，我在 Chrome 上测试过...)

您可以在警报窗口中看到完全相同的结果。'\r' 被忽略。

$("#ex1").append("\r"); //This one works as expected
$("#ex2").append("\n"); //This also works as expected
$("#ex3").append("\r\n"); //This also works as expected
$("#ex4").append("\r <el></el>"); //This replaces \r with \n
$("#ex5").append("\r\n <el></el>"); //This removes \r completely

var text4 = "\r <el></el>";
var text5 = "\r\n <el></el>";

alert(text4);    //check this
alert(text5);    //and this

$("div").on("click", function () {
    alert(JSON.stringify(this.innerHTML));
});