如何在外部JavaScript文件中实现HTML页面内容的换行效果

问题原因 #

你使用的textContent属性会将所有传入内容识别为纯文本，既不会解析<br>这类HTML标签，也不会将\n转义为渲染层面的换行，所以你输入的换行标记都会原样展示。

解决方案 #

这里提供两种可选方案，你可以根据自己的需求选择：

• 方案1：改用innerHTML属性赋值
  该方案直接支持插入HTML标签实现换行，适合你当前仅展示系统内置参数的场景，没有安全风险，改法如下：

function screenResolution() {
    clearBox();
    document.getElementById('heading').textContent = "Screen Resolution";
    // 替换textContent为innerHTML，插入<br>换行标签
    document.getElementById('output').innerHTML = "Width: " + screen.width + "<br>Height: " + screen.height;
}

• 方案2：保留textContent，搭配CSS实现换行
  如果需要避免XSS风险（比如后续会插入用户输入内容），可以选择该方案，首先给output元素添加CSS规则：

#output {
  white-space: pre-line;
}

之后JS代码中用\n作为换行符即可生效：

document.getElementById('output').textContent = "Width: " + screen.width + "\nHeight: " + screen.height;

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