如何防止insertBefore方法移除页面换行格式？

我明白你的问题所在了——根本不是insertBefore()的锅，问题出在两个地方：你使用的内容赋值方式，以及冗余的DOM操作逻辑。

问题根源分析 #

1. textContent会忽略HTML标签
   你用message.textContent来设置消息内容，这个属性的作用是获取/设置元素的纯文本内容，它会把所有HTML标签（比如你的<br>）当作普通文本处理，甚至直接丢弃标签结构，只保留文本部分。这就是为什么原本的换行标签消失，所有内容挤成了一行。

2. 冗余的DOM操作
   你先执行messages.appendChild(message)把消息加到聊天框末尾，紧接着又用insertBefore把它插到第一个子元素前面，这完全是多此一举，反而可能引发不必要的DOM重绘。

修复方案 #

把textContent换成innerHTML来解析HTML标签，同时简化DOM操作逻辑：

for (var x = 0; x < data.length; x++) {
  // 创建消息容器
  var message = document.createElement('div');
  message.setAttribute('class', 'chat-message');
  // 使用innerHTML解析HTML换行标签
  message.innerHTML = data[x].name + ": " + data[x].message;
  // 直接将新消息插入到聊天框最顶部
  messages.insertBefore(message, messages.firstChild);
}

额外提示（安全注意） #

如果你的消息内容包含用户输入的不可信内容，直接用innerHTML可能存在XSS风险。这种情况下，你可以先转义文本内容，再手动处理换行：

// 转义HTML特殊字符
function escapeHtml(text) {
  return text.replace(/[&<>"']/g, function(match) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    }[match];
  });
}

// 处理换行：保留原有的<br>标签
var escapedMessage = escapeHtml(data[x].message);
message.innerHTML = data[x].name + ": " + escapedMessage.replace(/&lt;br&gt;/g, '<br>');

这样既保留了换行格式，又避免了安全问题。

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