在JS文件中通过DOM操作HTML页面时，如何实现文本换行？

你遇到的问题核心是textContent会把所有内容当作纯文本处理，包括<br>标签，所以它不会被解析成换行，而是直接显示成字符串。下面给你三种可行的解决方法：

方法一：使用innerHTML替代textContent #

innerHTML会把内容当作HTML解析，<br>标签就能正常生效：

document.getElementById("stat").innerHTML=`
    Title : Bullet Train <br>
    Duration: 190min <br>
    Director: David Leitch<br>
    Starring: Brad Pitt`

方法二：用换行符\n配合CSS样式 #

如果不想依赖HTML标签，直接用纯文本换行符\n，再给目标元素加CSS样式让换行生效：

document.getElementById("stat").textContent=`
    Title : Bullet Train
    Duration: 190min
    Director: David Leitch
    Starring: Brad Pitt`

对应的CSS：

#stat {
    white-space: pre-line; /* 保留换行，自动合并多余空格 */
    /* 也可以用white-space: pre; 完全保留文本里的空格和换行格式 */
}

方法三：创建结构化元素（更推荐） #

如果需要更规范的页面结构，给每行单独创建<p>元素，符合HTML语义化：

const statElement = document.getElementById("stat");
statElement.innerHTML = ""; // 清空原有内容

const lines = [
    "Title : Bullet Train",
    "Duration: 190min",
    "Director: David Leitch",
    "Starring: Brad Pitt"
];

lines.forEach(line => {
    const p = document.createElement("p");
    p.textContent = line;
    statElement.appendChild(p);
});

这种方式方便后续单独调整每行样式，维护性更强。

内容的提问来源于stack exchange，提问作者The Junkmania.c