変換divをjavascriptのテキストに追加[複製]

Question

私はDBからのデータを動的にコーディングしているので、JavaScriptでjQueryを追加せずにすべてのLi要素に追加する必要があります。

これは私のコードです：

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

結果は次のとおりです。

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

HTMLではなくテキストとして来てください

Answer 1

innerHTML代わりに使用できます：

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

appendChild関数が必要であり、文字列の代わりにノード要素を渡します。

createElementを使用してリスト要素を作成し、適切な属性と目的のinnerHTMLを割り当てる必要があります。

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>