añadir convertir div a texto en javascript [duplicado]

Question

Estoy trabajando en codificar dinámicamente los datos que provienen de DB, y necesito todos los elementos Li agregando en JavaScript sin jQuery:

Este es mi código:

const x = document.getElementById('messagesContent')
x.append(`<li class="message"><b>User</b><br/>${message}</li>`);

El resultado es:

<li class="message"><b>User</b><br/>xxxxxxxx</li>

Ven como texto, no html

Answer 1

Puedes usar innerHTMLen su lugar:

const x = document.getElementById('messagesContent');
let message="Hello";
x.innerHTML += `<li class="message"><b>User</b><br/>${message}</li>`;

<ul id="messagesContent"></ul>

Answer 2

Necesita la función appendChild y pasar un elemento de nodo en lugar de una cadena.

Debe crear un elemento de lista a través de createElement y asignar los atributos adecuados y el innerHTML que se pretende.

const x = document.getElementById('list');
const li = document.createElement('li');
li.class = 'message'
li.innerHTML = `<b>User</b><br/>second`;
x.appendChild(li);

<ul id="list">
  <li>first</li>
</ul>