สร้างรายการทำงาน (To-Do List) ด้วย JavaScript

ตัวอย่างโค้ด

โค้ดต่อไปนี้สร้าง To-Do List เรียบง่าย:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
  <input type="text" placeholder="Please Enter your Task Here.." id="txtData">
  <button onclick="todoList()">Add Task</button>
  <ul id="to_do_list"></ul>
</body>
<script>
  function todoList() {
    const myTask = document.getElementById('txtData');
    const addToDoList = document.getElementById('to_do_list');
    let originalValue = `<li> ${myTask.value} </li>`;
    myTask.value = '';
    addToDoList.insertAdjacentHTML('beforeend', originalValue);
  }
</script>
</html>

บันทึกไฟล์เป็น index.html แล้วคลิกขวาเลือก "Open with Live Server" ใน VSCode

ผลลัพธ์

เมื่อกรอกงานและกดปุ่ม Add Task งานจะถูกเพิ่มลงในรายการ

คำอธิบาย: ใช้ insertAdjacentHTML() เพื่อเพิ่มรายการใหม่เข้าไปใน <ul> โดยไม่ต้องโหลดหน้าใหม่