Javascript add linebreak, \n not working

Question

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

Your code works, but you need to use something that respects whitespace like pre: jsfiddle.net/kh38j9xc Or white-space: pre in a selector. — Jared Farrish
– Jared Farrish, Commented Dec 31, 2015 at 13:08

Jared Farrish · Accepted Answer · 2015-12-31 15:32:23Z

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:

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.

answered Dec 31, 2015 at 15:32

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob Over a year ago

Perfect, thanks, I was missing the white-space: pre style in html like you said.

user1037355 · Accepted Answer · 2015-12-31 13:18:25Z

0

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.

answered Dec 31, 2015 at 13:18

user1037355

2 Comments

Jared Farrish Over a year ago

Or use container.style.whiteSpace = 'pre';.

user1037355 Over a year ago

Yup, that's basically what I said :)

Denys Séguret · Accepted Answer · 2015-12-31 14:33:19Z

0

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.

edited Dec 31, 2015 at 14:33

answered Dec 31, 2015 at 13:14

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

4 Comments

Jared Farrish Over a year ago

Is there a particular browser the OP's original code does work in? Simply adding container.style.whiteSpace = 'pre'; would fix the display.

Denys Séguret Over a year ago

@JaredFarrish This should be an additional answer (even if I would rarely use whiteSpace pre as it applies to all white spaces, not just those specific ones.

Jared Farrish Over a year ago

You can't insert \n in text node and have them correctly rendered. The line breaks can be rendered as the OP intended by changing the parent element's styling.

Denys Séguret Over a year ago

@JaredFarrish Stop hammering this, you already said it. Make an answer if you think it's a valid solution (I think it is).

Collectives™ on Stack Overflow

Javascript add linebreak, \n not working

3 Answers 3

1 Comment

2 Comments

insert `<br>` elements

use `innerText` in SPAN

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

insert <br> elements

use innerText in SPAN

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related

insert `<br>` elements

use `innerText` in SPAN