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

【问题标题】：How do I create a new line when I use a createelement('p') in JavaScript to HTML?在 JavaScript 到 HTML 中使用 createelement('p') 时如何创建新行？
【发布时间】：2021-08-17 22:39:23
【问题描述】：

我的 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

2009 年 1 月 10 日

主题：快乐

身体：你好！

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

当网页从 JavaScript 渲染为 HTML 时，如何使这些中断变成新行？

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

【问题讨论】：

 和   应该在呈现 HTML 时创建换行符。
但是，更好的是理解换行符在 HTML 中“只是空白”，并使用 CSS 来布局您的内容。你不想要换行符。您需要具有类和属性的 HTML 元素，以便您使用 CSS 定位它们。
对变量中创建的元素使用追加。您正在附加一个字符串，因此它会显示一个字符串。你应该使用innerHTML。
谢谢大家。这是超级有用的

标签： javascript html newline

【解决方案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);

【讨论】：