createElement และ append

สร้างโหนดใหม่แล้วแปะเข้าหน้า

const list = document.querySelector("#list");
const li = document.createElement("li");
li.textContent = "โน้ตใหม่";
list.append(li);

ผลลัพธ์ที่คาดหวัง

รายการมี li ใหม่ต่อท้าย โดยไม่ต้องเขียน HTML สตริงยาว

ทำไมไม่ innerHTML ทั้งก้อนเสมอ

สร้างโหนดทีละชิ้นควบคุมเหตุการณ์และข้อความได้ชัด และลดความเสี่ยง HTML แปลกปลอม