javascript에서 div를 텍스트로 변환 추가 [중복]

Question

DB에서 오는 데이터를 동적으로 코딩하고 있으며 jQuery없이 JavaScript에 추가하여 모든 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>