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

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中呈现如下:

[e-mail]

2009.01.10

主题:快乐

身体:你好!

然而，我在网页上得到这个:[e-mail] <br></br> jan 10, 2009 <br>qww</p><p>body: hello!</p><p>，没有换行符

当网页从JavaScript渲染到HTML时，我如何使这些中断成为新的行?

我试过这个Stack Overflow post，但是我不能让/n工作。

Answer 1

createTextNode用于创建文本，而不是像<br>或<p>这样的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);