How do I create a new line when I use a createelement('p') in JavaScript to HTML?

Question

I have the following in my JS file:

const emailCol = `${email.sender} <br> ${email.subject}  <br>   ${email.timestamp}`
  const moo  = document.createElement('br');
  console.log("HERE!!", emailCol)
  em.innerHTML = emailCol;


  const para = document.createElement("p");
const node = document.createTextNode(`${email.sender} <br></br> `);
para.appendChild(node);
const node1 = document.createTextNode(`${email.timestamp} <br>`);
para.appendChild(node1);
const node2 = document.createTextNode(`${email.subject}</p><p>`);
para.appendChild(node2);
const node3 = document.createTextNode(`${email.body}</p><p>`);
para.appendChild(node3);

const element = document.getElementById("div1");
element.appendChild(para);

My aim is to render in HTML something like:

John@sender.com

jan 10, 2009

subject: happy

body: hello!

However, I am getting this in the webpage: John@sender.com jan 10, 2009 qwwbody: hello! with no line breaks.

How do I make these breaks become new lines when the webpage renders from JavaScript to HTML?

I tried this Stack Overflow post, but I can't get the /n to work.

`
` and `
` should create newlines when the HTML is rendered. — Barmar, Aug 17 '21 at 22:41
However, even better is to understand that newlines are "just whitespace" in HTML, and use CSS to lay out your content. You don't want newlines. You want HTML elements with classes and attributes that let you target them with CSS. — Mike 'Pomax' Kamermans, Aug 17 '21 at 22:42
Using append is for created elements in a variable. You are appending a string so it would show a string. You should use innerHTML. — AlexSp3, Aug 17 '21 at 23:07

score 1 · Accepted Answer · answered Aug 17 '21 at 23:30

createTextNode is for creating text, not HTML elements like   or . Try this:

const para1 = document.createElement("p");
para.appendChild(document.createTextNode(`${email.sender}`));
para.appendChild(document.createElement("br"));
para.appendChild(document.createTextNode(`${email.timestamp}`);
para.appendChild(document.createElement("br"));
para.appendChild(document.createTextNode(`${email.subject}`);

const para2 = document.createElement("p");
para2.appendChild(document.createTextNode(`${email.body}`);

const element = document.getElementById("div1");
element.appendChild(para);
element.appendChild(para2);

How do I create a new line when I use a createelement('p') in JavaScript to HTML?

1 Answers1