如何使用 Javascript 在一个元素下嵌套多个 HTML 元素？

Question

我正在使用 Javascript/socket.io 来显示聊天消息。我正在尝试镜像我的 HTML 文件中已经存在的结构/类：<li>    <span id="messageUsername">{{message.user}}</span>    <p id="messageViewContent">{{message.content}}</p></li>我的javascript如下：const li = document.createElement('li');const spanUser = document.createElement('span');const p = document.createElement('p');spanUser.innerHTML = `${data.messageUser}`spanUser.classList.add("messageUsername")p.innerHTML = `${data.messageContent}`;p.classList.add("messageViewContent");li.innerHTML = p + spanUser;document.querySelector('#messageLoop').append(li);我还尝试了以下方法：li.innerHTML = p, spanUser;并且li.append(p)，都没有奏效。使用我当前的代码，它显示的不是显示消息：[object HTMLParagraphElement]我在这里做错了什么？它看起来很简单，但我似乎无法获得正确的语法。提前致谢。

Answer 1

您正在尝试连接 DOM 元素，您真正想要的是将它们附加到先前创建的li元素中。

删除这个li.innerHTML = p + spanUser;

并将元素附加到li元素。

li.append(spanUser);
li.append(p);