Anhängen konvertieren div zu Text in Javascript [duplizieren]

Question

Ich arbeite daran, die Daten, die aus der Datenbank kommen, dynamisch zu codieren, und ich muss an alle Li-Elemente in JavaScript no jQuery anhängen:

Das ist mein Code:

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

Das Ergebnis ist:

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

Kommen Sie als Text nicht HTML

Answer 1

Sie können innerHTMLstattdessen verwenden:

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

Sie benötigen die Funktion appendChild und übergeben ein Knotenelement anstelle einer Zeichenfolge.

Sie müssen ein Listenelement über createElement erstellen und die richtigen Attribute und das beabsichtigte innerHTML zuweisen.

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>