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 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);
}

• javascript
• line-breaks

• Can you add code for getchilds()? – Cyval Commented Dec 31, 2015 at 13:04
• 2 Use <br /> instead of \n if you insert it to html page. – Alexander Popov Commented Dec 31, 2015 at 13:05
• 2 Your code works, but you need to use something that respects whitespace like pre: jsfiddle/kh38j9xc Or white-space: pre in a selector. – Jared Farrish Commented Dec 31, 2015 at 13:08

3 Answers 3

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:

1. 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).
2. If the container-referenced element acmodates this, add white-space: pre to it's style. This will cause your line-breaks to e into view. It's best to do this with CSS, but you can do it with Javascript too.
3. Replace the \n with a <br>. Denys Séguret has an example of this.
4. Use a pre tag for the container-referenced element. <pre> automatically respects and displays line-breaks in content. This of course implies your content acmodates 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.