ต่อท้ายการแปลง div เป็นข้อความใน javascript [ซ้ำ]

Question

ฉันกำลังทำงานกับโค้ดแบบไดนามิกข้อมูลที่มาจาก DB และฉันต้องการ Li Element ทั้งหมดโดยผนวกใน JavaScript no jQuery:

นี่คือรหัสของฉัน:

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>