如何使用 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);