add_items.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #itemList {
            margin-top: 20px;
        }
        .list-item {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>My Item List</h1>
    <input type="text" id="newItem" placeholder="Enter new item" />
    <button onclick="addItem()">Add Item</button>

    <ul id="itemList">
        <li class="list-item">Item 1</li>
        <li class="list-item">Item 2</li>
        <li class="list-item">Item 3</li>
    </ul>
</body>
<script>
    function addItem() {
        var newItem = document.getElementById('newItem').value;
        if (newItem) {
            var ul = document.getElementById('itemList');
            var li = document.createElement('li');
            li.className = 'list-item';
            li.appendChild(document.createTextNode(newItem));
            ul.appendChild(li);
            document.getElementById('newItem').value = '';
        } else {
            alert('Please enter an item.');
        }
    }
</script>
</html>