为何使用.append($(message_element))仅输出[object Object]？

核心问题1：模板字符串的HTML被转义，样式无法生效 #

你在模板字符串里写了<、"这类HTML实体，浏览器会把它们当作普通文本解析，不会生成真正的DOM元素，自然样式也无法应用。

核心问题2：原生DOM节点调用append时传入jQuery对象，导致显示[object Object] #

message_body是通过原生JS的document.querySelector获取的DOM节点，它的append方法只接受DOM元素、文本节点或者字符串。你传入的$(message_element)是一个jQuery对象，原生append会把这个对象直接转为字符串，也就是[object Object]。

修改后的代码示例 #

方案一：用原生JS的insertAdjacentHTML（推荐，无需依赖jQuery操作DOM）

let input_message = document.querySelector('#input-message')
let message_body = document.querySelector('.msg_card_body')
let send_message_form = document.getElementById('send-message-form')
let loc = window.location
let wsStart = 'ws://'

if (loc.protocol === 'https') {
  wsStart = 'wss://'
}

let endpoint = wsStart + loc.host + loc.pathname
var socket = new WebSocket(endpoint)

socket.onopen = function(event) {
  console.log('open', event)
  send_message_form.addEventListener('submit', function(event) {
    event.preventDefault()
    
    let message = input_message.value
    let data = {
      'message': message,
    }
    
    data = JSON.stringify(data)
    socket.send(data)
  })
}
socket.onmessage = function(event) {
  console.log('message', event)
  
  let data = JSON.parse(event.data)
  let message = data['message']
  newMessage(message)
}
socket.onerror = function(event) {
  console.log('error', event)
}
socket.onclose = function(event) {
  console.log('closed', event)
}

function newMessage(message) {
  if ($.trim(message) === '') {
    return false;
  }

  // 修复：直接写正常的HTML标签，不用转义
  let message_element = `
    <div class="d-flex mb-4 replied">
      <div class="msg_cotainer_send">
        ${message}
        <span class="msg_time_send">8:55 AM, Today</span>
      </div>
      <div class="img_cont_msg">
        <img src="data:image/jpeg;">
      </div>
    </div>
  `

  // 修复：用原生insertAdjacentHTML插入HTML字符串
  message_body.insertAdjacentHTML('beforeend', message_element)
  
  // 优化滚动：精准滚动到消息容器底部
  $(message_body).animate({
    scrollTop: message_body.scrollHeight
  }, 100);
  input_message.value = '';
}

方案二：将message_body转为jQuery对象，用jQuery的append方法

// 把message_body的获取改成jQuery方式
let message_body = $('.msg_card_body')
let input_message = $('#input-message')
let send_message_form = $('#send-message-form')

let loc = window.location
let wsStart = 'ws://'

if (loc.protocol === 'https') {
  wsStart = 'wss://'
}

let endpoint = wsStart + loc.host + loc.pathname
var socket = new WebSocket(endpoint)

socket.onopen = function(event) {
  console.log('open', event)
  send_message_form.on('submit', function(event) {
    event.preventDefault()
    
    let message = input_message.val()
    let data = {
      'message': message,
    }
    
    data = JSON.stringify(data)
    socket.send(data)
  })
}
socket.onmessage = function(event) {
  console.log('message', event)
  
  let data = JSON.parse(event.data)
  let message = data['message']
  newMessage(message)
}
socket.onerror = function(event) {
  console.log('error', event)
}
socket.onclose = function(event) {
  console.log('closed', event)
}

function newMessage(message) {
  if ($.trim(message) === '') {
    return false;
  }

  // 修复HTML转义问题
  let message_element = `
    <div class="d-flex mb-4 replied">
      <div class="msg_cotainer_send">
        ${message}
        <span class="msg_time_send">8:55 AM, Today</span>
      </div>
      <div class="img_cont_msg">
        <img src="data:image/jpeg;">
      </div>
    </div>
  `

  // 用jQuery的append方法直接插入字符串
  message_body.append(message_element)
  
  // 优化滚动：精准滚动到消息容器底部
  message_body.animate({
    scrollTop: message_body[0].scrollHeight
  }, 100);
  input_message.val('');
}

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