contenteditable文本框设置innerHTML含换行符无显示问题求助

核心原因 #

你踩了两个非常规用法的坑：

1. <textarea> 是原生表单控件，它的内容本该用 value 属性管理，而非 innerHTML，直接给 innerHTML 加换行符会被浏览器忽略。
2. 给 <textarea> 设置 contenteditable="true" 属于违背控件设计的用法，会打乱它的原生解析逻辑——此时设置 innerHTML 里的 <br> 会被转义成纯文本，不会被解析成换行。

方案1：规范用法（推荐） #

直接移除 contenteditable="true"，用 <textarea> 原生的 value 属性设置内容，换行符 \n 会自动渲染成换行：

修改后的HTML：

<textarea id="myTextArea" placeholder="empty"></textarea>

设置内容的JS代码：

document.getElementById("myTextArea").value = 'Hi \n There';

方案2：非要用可编辑元素（不推荐） #

如果确实需要类似 contenteditable 的自由编辑体验，建议把 <textarea> 换成 <div>，此时可以用 innerHTML 插入 <br> 实现换行：

修改后的HTML：

<div id="myTextArea" contenteditable="true" placeholder="empty"></div>

设置内容的JS代码：

document.getElementById("myTextArea").innerHTML = 'Hi <br> There';

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