Why is jquery adding CR-LF to newly created elements in IE7 and IE8?

Question

JQuery is adding the carrige return and new line characters to the beginning of any newly created JQuery elements in IE7 and IE8. What is going on?

Using JQuery version 1.9.1 with the following:

var myDiv = $('<div>');
alert('myDiv[0].outerHTML="' + myDiv[0].outerHTML + '"');

results in the output when executed in IE8 or IE7:

"
myDiv[0].outerHTML=<div></div>"

You can repro in this jsbin sample, but remember to use IE8 or IE7 mode.

Answer 1

It's not related to jquery, I can tell you that much. It's the underlying JS engine and how it handles things. My guess is outerHTML products an HTML Fragment and IE7/8 creates those with a newline. Since whitespace between tags isn't taken into consideration for document flow according to the spec, how the HTML is actually generated -- i.e. with or without that leading newline; with or without tag indentation, etc -- is really up to each browser to specify.

http://jsbin.com/izemop/1/ See this example that uses a div that's in the actual document and gotten by the DOM's getElementById. You get the same results.

Answer 2

Relative to javascript engine. As a simple workaround when needed, you could use $.trim() function:

var myDiv = $('<div/>');
alert('myDiv[0].outerHTML="' + $.trim(myDiv[0].outerHTML) + '"');