Develop Reference

Javascript add linebreak, \n not working

I want to add a linebreak in Javascript, but \n is not working and nothing else I found so far is not working (like <br> or \n). Also, because of the programming I cannot use .appendChild.
for (i=getchilds();i<number;i++){
container.appendChild(document.createTextNode("\n" + "Pers. " + (i+1) + " \u00a0"));
var input = document.createElement("input");
input.type = "number";
container.appendChild(input);
}

I think you may be confusing whitespace with the representation of whitespace. In your case you're appending characters that represent white-space to a string that you intend to be displayed as a line-break. I assume you're then appending it to an element whose style is not set to display it as white-space.
There are four basic ways to fix this:
Use an ordered list. If you can, do this, since it will be both structural and semantic. Notice the link shows how to control the list-item text (controlling the start number is more challenging).
If the container-referenced element accommodates this, add white-space: pre to it's style. This will cause your line-breaks to come into view. It's best to do this with CSS, but you can do it with Javascript too.
Replace the \n with a <br>. Denys Séguret has an example of this.
Use a pre tag for the container-referenced element. <pre> automatically respects and displays line-breaks in content. This of course implies your content accommodates using a pre-formatted tag.

Change your code to insert into a textarea or a set of pre tags.
You might see your code injecting a single space in place of the line breaks in a plain text input of your browser is Firefox chrome or opera.

You can't insert \n in text node and have them correctly rendered in an element with standard white-space rendering.
Two solutions here:
insert <br> elements
container.appendChild(document.createElement("BR"));
container.appendChild(document.createTextNode("Pers. " + (i+1) + " \u00a0"));
use innerText in SPAN
var node = document.createElement("SPAN");
node.innerText = "\n Pers. " + (i+1) + " \u00a0";
container.appendChild(node);
The first one is the most relevant in your case, but the fact innerText doesn't remove newlines (contrary to textContent) is often useful.

"document.write" removes all duplicated spaces

I want to keep space when I use document.write();
var text = "many spaces";
document.write(text);
But the output is "many spaces".
How to do that please?
PS: I've tried with innerHTML but it does the same:
<p id=demo></p>
document.getElementById("demo").innerHTML = "many spaces";

It's not document.write, it's default behavior of how spaces are rendered. W3C specification explicitly defines:
Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.
If you want to preserve spaces you can either render content in <pre> tag:
var text = "many spaces";
document.querySelector('pre').innerHTML = text;
<pre></pre>
... or use white-space: pre CSS rule:
var text = "many spaces";
document.querySelector('div').innerHTML = text;
div { white-space: pre;}
<div></div>
There is one more option, using however I would not recommend it since this not the same at all as normal white space character (because it's non-breaking). It is also can be non convenient to convert original text spaces into .

Use wich means Non Breaking SPaces;
So write this :
var text = "many spaces";
The reason is that HTML simplifies the text display. There are many reasons in web programming to produce many white spaces that have no interest. So it's easier to remove duplicate spaces than to try to avoid these duplicates.
If you want add space for better display, you should probably also use CSS.

You should use instead of blank space.
This is what I would do:
var text = "many spaces";
document.write(text.replace(' ', ' '));
Note that this is not a problem with document.write, rather how the blank spaces are rendered in HTML.

How to preserve whitespace in dynamically added javascript DOM element without using CSS?

When adding in text with small whitespace appended to it for alignment purposes the whitespace is trimmed off (the whitespace is added in c# so by the time it gets to front end Javascript it cannot be edited - it would be nice to just use some CSS to do this but it is not an option).
Here is what I tried so far:
var zlp = document.getElementById("testDiv")
zlp.innerHTML = "hello hello"
var zzz = document.createTextNode("hello hello")
zlp.appendChild(zzz)
<div id="testDiv"></div>
Both of which produce hello hello.

White space characters are usually collapsed in HTML (by default).
You can replace it with the entity:
var text = text.replace(/\s/g, ' ');
\s will match any white space character, such as space, tab and new line. If you only want to replace space, use / /g instead.
Other options which avoid string manipulation:
Put the text in a pre element.
Set the CSS 2 white-space property to pre as #Esailija pointed out. You can always add CSS properties dynamically to elements, they don't have to be specified in a style sheet.

use
zlp.innerHTML = "hello hello";
Like everyone else just said.

use a html tag 'pre'
Example:
<pre>
A line
A line with indent
</pre>
result:
A line
A line with indent

White space is collapsed in HTML. It's not a JS issue, the same would happen if you typed that manually in the HTML document. You need to replace the spaces with
zlp.innerHTML = "hello hello".replace( / /g, " " );

JQuery to Trim leading white space only?

I am theming a JSP app that has a table header with dynamically generated data (I think it's called Jasper Reports?) and I don't have access to any template files for the output. I've gotten things to look pretty good with a little JQuery foo.
But I am still having one issue, there seems to be white space in some span tags within the headers td > spans:
<td><span> My Heading</span></td>
Note the white space before the word "My".
I found this nifty bit of code to trim white space but the issue is that it takes all white space out.
var pane = $('span');
pane.val($.trim(pane.val()).replace(/\s*[\r\n]+\s*/g, '\n')
.replace(/(<[^\/][^>]*>)\s*/g, '$1')
.replace(/\s*(<\/[^>]+>)/g, '$1'));
So now using this code, it ends up as:
<td><span>MyHeading</span></td>
Ideally I would like to modify it so just the first bit of white space is removed but none after that.

Use .text() to get the string value.
var pane = $('span');
pane.html($.trim(pane.text()));
http://jsfiddle.net/gaboesquivel/cHevR/
Edit:
the above code won't work as it overwrites the text if it there's more than 1 span in the document
You need to iterate the array of spans
//array of all the spans that are children of a td element
var spansArray = $('td > span');
//iterate the array
spansArray.each(function() {
var $this = $(this);
$this.html($.trim($this.text()));
});​
http://jsfiddle.net/gaboesquivel/cHevR/2/

Try this:
.replace(/^\s+/g, "");
That should trim any whitespace at the beginning of the string. Alternatively, you can make it trim trailing whitespace using a slightly different expression. See here:
http://www.toptip.ca/2010/02/javascript-trim-leading-or-trailing.html
Here's the example so you can see how it works:
http://jsfiddle.net/CkMPH/

For the only first space to be removed you need that code
var pane = $('span');
pane.text(pane.text().replace(/^\s/, ''));
http://jsfiddle.net/P9jSL/

how to process textarea multiple line input if user hit "enter/return" key

my coding:
...
<textarea name="TextArea1" id="TextArea" style="height ; width" ></textarea>
...
<script type="text/javascript">
var txt_element = document.getElementById("TextArea");
document.write (txt_element.childNodes[0].nodeValue);
</script>
...
but it doesn't recognize "enter/return" key hited instead it shows " "
Many thanks

To expand on Chris's answer, the problem is that the browser is rendering the text you write in the same way as it renders any other piece of html, which means white space (including carriage returns) is treated as a word separator, not a line or paragraph separator. And multiple consecutive white space characters are condensed down to a single space. This is explained further in the html spec.
This is different to how it treats text within a textarea element.
So as Chris suggested, you need to replace carriage returns in your string with html <br> elements:
var enteredText = document.getElementById("TextArea").value;
var updatedText = enteredText.replace(/\n/g, '<br />');
document.write(updatedText);
Note: you should be able to get the textarea's value directly with .value rather than saying .childNodes[0].nodeValue.
Note 2: I second what Chris said about document.write() - it is usually not the best option.
Note 3: If you're catering for non-Windows system you may also need to replace \r.

Text areas use \n to designate a new line, something along these lines should work:
string = document.getElementById("TextArea")childNodes[0].nodeValue;
string = string.replace(/\n/g, '<br />');
document.write('string');
Not sure if you're just goofing around, but I feel compelled to mention that generally speaking you should never use document.write().