Как вложить несколько элементов HTML в один элемент, используя Javascript?

Question

Я использую Javascript / socket.io для отображения сообщения чата. Я пытаюсь отразить структуру / классы, которые уже существуют в моем файле HTML:

<li>
    <span id="messageUsername">{{message.user}}</span>
    <p id="messageViewContent">{{message.content}}</p>
</li>

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