如何通过编程方式为p标签添加换行符

问题根因 #

• textContent 只会将赋值内容解析为纯文本：不会识别HTML标签<br>/<br/>，所以标签会直接作为文本显示；同时HTML默认开启空白符折叠规则，\n会被当成普通空白符合并，不会产生换行效果。

可行解决方案 #

方案1：用innerHTML解析HTML标签

如果你的内容是可控的（无用户输入的不可信内容），直接用innerHTML代替textContent，它会自动解析HTML的<br>标签：

document.getElementById('2').innerHTML = "<br/>".repeat(6)

注意：如果赋值内容包含用户输入的不可信文本，该方案存在XSS注入风险

方案2：保留\n+修改CSS空白规则

如果想继续用\n实现换行，给目标元素添加white-space属性，让浏览器保留换行符：

p {
  border: 1px solid black;
  white-space: pre-line; /* 保留换行符，同时合并其他多余空白 */
  /* 可选值：
    pre: 完全保留所有空白和换行，超出容器不自动折行
    pre-wrap: 完全保留所有空白和换行，超出容器自动折行
    pre-line: 保留换行，合并其他空白，超出容器自动折行
  */
}

JS代码无需修改，原来的\n就会生效：

document.getElementById('1').textContent = "\n".repeat(6)

方案3：动态创建<br>元素插入（最安全）

既不想用innerHTML冒XSS风险，也不想修改CSS的话，可以直接创建br元素插入到目标节点中：

const targetEl = document.getElementById('1')
for (let i = 0; i < 6; i++) {
  targetEl.appendChild(document.createElement('br'))
}

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