JavaScript前端构建字符串时如何实现换行？

哦，这个问题我太熟悉了！你试了各种换行方式都没效果，核心原因是**textContent会把所有内容当作纯文本处理**——不管是HTML标签<br>还是换行符\n，都会原封不动地显示成文本，不会被浏览器解析成换行。

这里给你两种靠谱的解决办法，按需选择：

方法1：改用innerHTML解析HTML标签 #

如果你想用HTML的<br>标签实现换行，只需要把textContent换成innerHTML就行，浏览器会自动解析<br>为换行：

// 记得先初始化str，不然会默认带上undefined哦
var str = "";
str += "text" + data[0];
str += "<br>"; // 这里添加HTML换行标签
str += "text" + data[1];
var p = document.getElementById("paragraph");
p.innerHTML = str;

⚠️ 注意：如果data里的内容是用户输入的不可信内容，用innerHTML可能会有XSS安全风险，这种情况更推荐第二种方法。

方法2：用textContent+CSS让换行符生效 #

如果想保留纯文本的换行逻辑（用\n），可以给段落元素添加CSS样式，让浏览器识别\n为换行：

首先给段落加CSS：

#paragraph {
  white-space: pre-line; /* 会合并连续空格，只保留换行 */
  /* 或者用white-space: pre-wrap; 会保留所有空格和换行 */
}

然后JS里用\n换行：

var str = "";
str += "text" + data[0];
str += "\n"; // 这里用纯文本换行符
str += "text" + data[1];
var p = document.getElementById("paragraph");
p.textContent = str;

这种方法更安全，因为不会解析任何HTML，适合处理用户输入的内容。

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