当我在 JavaScript 到 HTML 中使用 createelement('p') 时，如何创建一个新行？

Question

我的 JS 文件中有以下内容：

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

我的目标是在 HTML 中呈现如下内容：

John@sender.com

jan 10, 2009

subject: happy

body: hello!

但是，我在网页中看到了这个： John@sender.com jan 10, 2009 qwwbody: hello! 没有换行符。

当网页从 JavaScript 呈现到 HTML 时，如何让这些中断变成新行？

我试过 this Stack Overflow post，但我无法让 /n 工作。

Answer 1

createTextNode 用于创建文本，而不是 HTML 元素，如   或 。试试这个：

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

当我在 JavaScript 到 HTML 中使用 createelement('p') 时，如何创建一个新行？

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

javascript

html

newline