Javascript new line built string?

Question

I'm building a string in JavaScript FE like you can see below, my attempt is to print some data in different rows. In my JavaScript I build the string the use getElement() and textContent to attach the string at the paragraph.

I've tried     \n <\r, all with no results.

var str;
str+="text" + data[0];
  str+= //Here need new line
str+="text" + data[1];

var p=document.getElementById("paragraph");
p.textContent = str;

In html use   tag for a visual new line. For a file on filesystem "\n" works generally. — user8018716
– user8018716, Commented May 9, 2022 at 14:05

Andy · Accepted Answer · 2022-05-09 14:12:24Z

1

It might be easier to use a template string, and then use innerText rather than textContent as they are different.

const arr = ['Bob', 'Jane'];

const str = `
  text: ${arr[0]}
  text: ${arr[1]}
`;

document.body.innerText = str;

answered May 9, 2022 at 14:12

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

Comments

mhodges · Accepted Answer · 2022-05-09 14:12:58Z

1

A couple options you have are:

put a   in the string and set the p.innerHTML = str instead of setting textContent

let myEl = document.getElementById('myelement');
let data = 'test 1';
data += '<br/>';
data += 'test 2';

myEl.innerHTML = data;

<div id="myelement"></div>

OR

put a \n character in the string and then use a white-space: pre in the CSS of your element

let myEl = document.getElementById('myelement');
let data = 'test 1';
data += '\n';
data += 'test 2';

myEl.textContent = data;

#myelement {
  white-space: pre;
}

<div id="myelement"></div>

edited May 9, 2022 at 14:12

answered May 9, 2022 at 14:06

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

Comments

Lk77 · Accepted Answer · 2022-05-09 14:16:47Z

1

If you need a string that can be displayed/downloaded as a file and displayed in html at the same time, i would use \n and innerText :

var str;
str+="text" + data[0];
  str+= '\n';
str+="text" + data[1];

var p=document.getElementById("paragraph");
p.innerText = str;

the \n will be replaced by   automatically when using innerText, and you wont need to style it with whitespace, and you could use the resulting string, to perhaps start a file download

answered May 9, 2022 at 14:16

Lk77

2,4921 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript new line built string?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related