如何隐藏textarea中的<br>？自动插入的br不显示且innerHTML正常渲染

你当前的实现混淆了两类DOM元素的换行规则，才出现输入框显示纯文本<br>、渲染区域换行异常的问题：

• textarea 是原生纯文本输入控件，对HTML标签无解析能力：往它的value属性里写入<br>字符串，它会直接把这几个字符当普通文本展示，根本不会转成换行效果——textarea本身只认\n作为合法换行标记
• 作为渲染容器的#text块元素，默认会把所有连续空白（包括真实换行符）折叠为单个空格：直接把带\n的纯文本赋值给它的innerHTML，它不会主动换行，必须把文本里的\n替换为<br>标签，才能被HTML解析器正确识别成换行效果

你之前的逻辑把同一个含<br>的字符串同时塞给了两个控件，既导致textarea里出现多余的代码文本，也没有匹配两类元素各自的渲染要求。

两个场景独立处理换行格式：

• 给textarea存值时，统一用\n表示换行，不塞入任何HTML标签，保证输入框展示符合预期，无多余文本
• 给渲染块赋值时，把所有\n替换为<br>标签，保证HTML解析后能正常显示换行

修正后的可运行代码：

function handle(e){
    if(e.keyCode === 13){
        e.preventDefault();
        const inputEl = document.getElementById("enteredText");
        const renderEl = document.getElementById("text");
        // 读取textarea当前的纯文本内容
        const currentText = inputEl.value;
        // 给textarea追加原生换行符，不会显示多余HTML文本
        const newInputContent = currentText + "\n";
        inputEl.value = newInputContent;
        // 渲染时全局把换行符替换为<br>，保证innerHTML正确解析所有换行
        const newRenderContent = newInputContent.replace(/\n/g, "<br>");
        renderEl.innerHTML = newRenderContent;
        // 可选优化：把光标定位到文本末尾，避免回车后光标跳回开头
        inputEl.setSelectionRange(newInputContent.length, newInputContent.length);
    }
};

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