jQuery text() ignores leading blank

Question

I'm working on a script, that should fill a table with some string data.
Using jQuery's append and text function works fine for data without a leading blank symbol.

But if the string starts with one or more blank symbols they are ignored.

Please have a look at this code example: https://jsfiddle.net/e56eb0zx/2/

var blank = " blank ";
var no_blank = "no_blank";

$("tbody").append(
  $("<tr>")
  .append($("<td>").text("|"+blank+"|"))
  .append($("<td>").text(blank))    // why isn't the blank displayed?
);

$("tbody").append(
  $("<tr>")
  .append($("<td>").text("|"+no_blank+"|"))
  .append($("<td>").text(no_blank))
);

How can i fix this behaviour?

Thanks in advance!

From [docs](http://api.jquery.com/text/#text), _Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space._ — Rayon, May 23 '16 at 09:59
I am seeing both looking ok (I believe) in the fiddle in Firefox. — Ukuser32, May 23 '16 at 10:00

score 1 · Accepted Answer · answered May 23 '16 at 10:02

jQuery is not the problem. The generated markup contains the blank before and after the word blank. Its a problem with rendering the table.

Set the CSS-Attribute white-space to pre or pre-wrap for your table cells to get the desired behaviour.

See this edited fiddle.

jQuery text() ignores leading blank

1 Answers1