HTML DOM (Document Object Model): Structure, Methods, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM Manipulation</title>
    <style>
        .todo-item { display: flex; justify-content: space-between; padding: 8px 12px; background: #f8fafc; border: 1px solid #e2e8f0; margin-bottom: 6px; border-radius: 6px; }
        .todo-item.done { text-decoration: line-through; color: #94a3b8; }
    </style>
</head>
<body>
    <h2>Interactive Task Manager (DOM in Action)</h2>

    <div style="margin-bottom: 15px;">
        <input type="text" id="taskInput" placeholder="Enter new task..." style="padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
        <button type="button" id="addTaskBtn" style="padding: 8px 14px; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer;">
            Add Task
        </button>
    </div>

    <!-- Container list modified by DOM methods -->
    <div id="taskList" style="max-width: 400px;"></div>

    <script>
        const input = document.getElementById('taskInput');
        const addBtn = document.getElementById('addTaskBtn');
        const list = document.getElementById('taskList');

        addBtn.addEventListener('click', () => {
            const taskText = input.value.trim();
            if (!taskText) return;

            // 1. Create Element Node
            const item = document.createElement('div');
            item.className = 'todo-item';

            // 2. Set Text Content (XSS Safe)
            item.textContent = taskText;

            // 3. Add Click Toggle Listener
            item.addEventListener('click', () => {
                item.classList.toggle('done');
            });

            // 4. Append to DOM Tree
            list.appendChild(item);
            input.value = '';
        });
    </script>
</body>
</html>