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

【问题标题】：How do I nest multiple HTML elements under one element using Javascript?如何使用 Javascript 在一个元素下嵌套多个 HTML 元素？
【发布时间】：2020-06-17 19:28:22
【问题描述】：

我正在使用 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]

我在这里做错了什么？看起来很简单，但我似乎无法获得正确的语法。提前致谢。

【问题讨论】：

什么是data.messageUser 和data.messageContent？它们是对象吗？在将它们附加到 HTML 之前查看它们是什么会很有帮助。另外，您使用的是innerHTML()，如果它们是文本innerText() 就足够了。

标签： javascript html innerhtml

【解决方案1】：

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

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

并将元素附加到li 元素。

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

【讨论】：