Why does jQuery append have inconsistent output for carriage return?

Question

The examples below demonstrate the 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> 

Why does jQuery append have inconsistent output for carriage return?

Using the DOM directly, adding text nodes, etc., \r saved (at least in Chrome, on 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/

This is not a jQuery problem.

I think this is a javascript related browser issue.

(IE uses '\ r', others use '\ n'. I tested on Chrome btw ...)

You can see exactly the same result in the warning windows. '\ r' is ignored.

 $("#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)); });