如何将websocket上的新消息.append()到带有CSS样式的页面？

要将websocket上的新消息.append()到带有CSS样式的页面，可以按照以下步骤进行：

1. 创建一个WebSocket连接：使用JavaScript中的WebSocket API创建一个WebSocket连接，指定连接的URL。
2. 监听WebSocket消息：使用WebSocket对象的onmessage事件监听器，当接收到新消息时触发该事件。
3. 解析接收到的消息：根据消息的格式进行解析，可以是JSON、XML或其他格式。
4. 创建新的消息元素：根据解析后的消息内容，使用JavaScript动态创建一个新的消息元素，可以是div、span或其他HTML元素。
5. 添加CSS样式：为新创建的消息元素添加所需的CSS样式，可以使用JavaScript操作元素的classList属性添加CSS类，或直接设置元素的style属性。
6. 将消息元素添加到页面：使用JavaScript将新创建的消息元素添加到页面的指定位置，可以是一个消息列表或聊天窗口。

以下是一个示例代码：

// 创建WebSocket连接
const socket = new WebSocket('wss://example.com/socket');

// 监听WebSocket消息
socket.onmessage = function(event) {
  // 解析接收到的消息
  const message = JSON.parse(event.data);

  // 创建新的消息元素
  const newMessage = document.createElement('div');
  newMessage.textContent = message.content;

  // 添加CSS样式
  newMessage.classList.add('message');

  // 将消息元素添加到页面
  const messageList = document.getElementById('message-list');
  messageList.appendChild(newMessage);
};

在上述示例中，通过WebSocket连接接收到的新消息会被解析为JSON格式，然后创建一个带有CSS样式的div元素，并将其添加到id为"message-list"的元素中。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。