Writing line breaks to a element using JavaScript?

Question

My goal is to take an array, and write each element onto a HTML page using a  element with .textContent using a for loop. Only problem is that instead of:

Error1
Error2

I get:

Error1<br/>Error2<br/>

HTML code:

<p><span id="EBox"></span></p>

JS code:

var EBox = document.getElementById("EBox");
var eArray = []; //Elements get added via push

for (var i = 0; i < eArray.length; i++) {
    EBox.textContent = EBox.textContent + eArray[i] + '<br/>';
}

The entire system works, but it just ends up as one jumbled sentence. What can I change to make it add the line breaks? I've tried ' ', ' ' and '\n' with similar results.

You can't use .textContent for this, because that's just text without any HTML rendering. — Barmar
– Barmar, Commented Apr 29, 2016 at 18:59

timolawl · Accepted Answer · 2016-04-29 18:10:13Z

3

Use ~~.innerHTML~~ .insertAdjacentHTML instead of .textContent as .textContent does not parse the HTML   but simply outputs it as text.

Also if you're appending to the HTML each time, it's better to use .insertAdjacentHTML as it does not reparse the previous HTML, thus making it much faster and less error prone than .innerHTML.

var strArr = ['foo', 'bar'];

strArr.forEach(function(str) {
  document.querySelector('div').insertAdjacentHTML('beforeend', str + '<br>');
});

<div></div>

edited Apr 29, 2016 at 18:10

answered Apr 29, 2016 at 18:04

timolawl

5,56415 silver badges31 bronze badges

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

1 Comment

freefaller Over a year ago

Didn't know about .insertAdjacentHTML - nice call :-)

freefaller · Accepted Answer · 2016-04-29 18:04:25Z

0

Instead of .textContent use .innerHTML.

I would also recommend building up a string first before using .innerHTML so the DOM isn't rebuilt each time...

var EBox = document.getElementById("EBox");
var eArray = []; //Elements get added via push

var html = "";    
for (var i = 0; i < eArray.length; i++) {
    html += eArray[i] + '<br/>';
}
EBox.innerHTML = html;

answered Apr 29, 2016 at 18:04

freefaller

20.1k7 gold badges62 silver badges96 bronze badges

Comments

Juliano Soder · Accepted Answer · 2021-07-30 18:59:20Z

0

I found a better answer here:

https://developer.mozilla.org/pt-BR/docs/Web/CSS/word-break

You can use CSS to do this, see below:

span{word-break: break-word;}

or

span{word-break: break-all;}

BREAKE-WORD will put the next word in a new line and BREAKE-ALL will break the text justifying the content, when it gets bigger than the div or span container.

I hope I'd help :)

answered Jul 30, 2021 at 18:59

Juliano Soder

192 bronze badges

Collectives™ on Stack Overflow

Writing line breaks to a <span> element using JavaScript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related