JavaScript使用createElement创建p元素时如何实现HTML换行？

问题根源 #

document.createTextNode()的作用是插入纯文本内容，传入的所有HTML标签（包括<br>、</p><p>等）都会被当成普通字符串渲染，不会被浏览器解析为DOM节点，因此无法产生换行效果。

解决方案 #

方案1：使用innerHTML拼接HTML（简单快速）

直接将带HTML标签的内容赋值给元素的innerHTML属性，浏览器会自动解析其中的标签生成对应的节点：

const para = document.createElement("p");
para.innerHTML = `${email.sender}<br>${email.timestamp}<br>subject: ${email.subject}<br>body: ${email.body}`;
document.getElementById("div1").appendChild(para);

注意：如果email内的字段来自用户输入，该方案存在XSS注入风险，建议使用方案2。

方案2：手动创建DOM节点插入（无安全风险）

需要换行时主动创建<br>元素插入，所有文本内容都通过createTextNode插入，不会解析额外标签，安全性最高：

const para = 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(`subject: ${email.subject}`));
para.appendChild(document.createElement("br"));
// 插入正文
para.appendChild(document.createTextNode(`body: ${email.body}`));

document.getElementById("div1").appendChild(para);

方案3：用\n换行配合CSS实现

如果希望用\n作为换行标识，只需要给对应元素添加white-space: pre-line的CSS属性即可：
首先添加样式：

.email-content {
  white-space: pre-line;
}

JS代码如下：

const para = document.createElement("p");
para.classList.add("email-content");
para.textContent = `${email.sender}\n${email.timestamp}\nsubject: ${email.subject}\nbody: ${email.body}`;
document.getElementById("div1").appendChild(para);

另外你之前写的em.innerHTML = emailCol代码逻辑本身是可以正常解析<br>实现换行的，如果该部分也不生效可以检查em元素是否被正确插入到了页面DOM树中。

内容的提问来源于stack exchange，提问作者Katie Melosto