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

Question

我正在使用 Javascript/socket.io 来显示聊天消息。我正在尝试镜像我的 HTML 文件中已经存在的 structure/classes：

<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);

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

How do I nest multiple HTML elements under one element using Javascript?

html

javascript

innerhtml