如何在单页聊天应用中展示用户输入？解决document.write()跳转问题

document.write() 在页面加载完成后调用时，会清空当前页面的所有内容并重新写入，这就是你看到消息出现在新页面的原因。要实现单页内实时展示消息，需要通过DOM动态操作来添加内容，而非覆盖整个页面。以下是具体实现步骤：

1. 基础HTML结构 #

先搭建消息展示容器和输入表单：

<!-- 消息展示区域 -->
<div id="message-container"></div>

<!-- 消息输入表单 -->
<form id="chat-form">
  <input type="text" id="message-input" placeholder="输入消息..." />
  <button type="submit">发送</button>
</form>

2. JavaScript核心逻辑 #

通过监听表单提交事件，阻止默认跳转行为，然后动态创建消息元素并添加到容器中：

const form = document.getElementById('chat-form');
const input = document.getElementById('message-input');
const messageContainer = document.getElementById('message-container');

form.addEventListener('submit', function(e) {
  // 阻止表单默认的页面跳转行为
  e.preventDefault();
  
  // 获取输入内容并去除首尾空格
  const content = input.value.trim();
  
  if (content) {
    // 创建消息元素
    const messageEl = document.createElement('div');
    messageEl.classList.add('user-message'); // 加类名方便样式控制
    messageEl.textContent = content;
    
    // 将消息添加到展示容器
    messageContainer.appendChild(messageEl);
    
    // 清空输入框
    input.value = '';
    
    // 自动滚动到最新消息位置
    messageContainer.scrollTop = messageContainer.scrollHeight;
  }
});

3. 可选样式优化（模拟聊天界面） #

添加CSS让消息展示更贴近WhatsApp风格：

#message-container {
  width: 350px;
  height: 450px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
  margin-bottom: 10px;
  background-color: #f0f2f5;
}

.user-message {
  background-color: #25d366;
  color: white;
  padding: 8px 14px;
  border-radius: 18px;
  margin-bottom: 10px;
  max-width: 75%;
  margin-left: auto; /* 让用户消息靠右对齐 */
}

#chat-form {
  display: flex;
  gap: 8px;
  width: 350px;
}

#message-input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 24px;
  border: 1px solid #e0e0e0;
  outline: none;
}

#chat-form button {
  padding: 10px 20px;
  border-radius: 24px;
  border: none;
  background-color: #25d366;
  color: white;
  cursor: pointer;
}

核心思路就是：通过preventDefault()阻止表单提交的页面跳转，用createElement()和appendChild()动态插入消息元素，全程不会刷新页面，实现单页内的消息展示。

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