how to set the text of a pre tag using jquery

Question

I'm using a pre tag to hold some raw formated text that has carriage returns. When the page is first displayed, it looks fine. Later, I want to refresh just the pre data. I've tried two ways to do this with jquery, one using .html() and the other way with .text(). Both sorta work, but the .html throws away the carriage returns and the .text double spaces the carriage returns! I've also tried .val() but that didn't work at all. Here's the code (of course I only use one of the jquery lines at a time.)

<pre id="QComment">Initial Text</pre>

at some time later,

$('#QComment').text(databack);   // or
$('#QComment').html(databack);

Answer 1

This is a common problem between *nix based systems and windows systems. Someone wrote a simple newline detection plugin for jQuery newlinecharacter

So, what you can do is:

$('#QComment').text(databack.replace(/\r\n/g,EOL));

Which, what you're doing is replacing all windows style line breaks with ones appropriate for the system viewing the data.

Answer 2

Try using standard DOM methods, maybe the jQuery does something on it's own:

$('#QComment')[0].innerHTML = html;

Answer 3

I would suggest not bothering to use jQuery in this instance, and just set the object using plain old javascript:

document.getElementById('QComment').innerHTML = yourHTML;

There's no reason to add the jQuery overhead to something as simple as this. If you want to use this on multiple elements, jQuery is fine:

$('#selector, .selector, [selector]').each(function(element, index){
  element.innerHTML = yourHTML;
});

Answer 4

Works like a charm for me: fiddle demo

Maybe you have some encoding problem? An example vould help.

(.val() sets the value attribute on the pre tag, which of course has no effect.)