Lista Dinámica de Ítems

CODE

<body>
    <h1>Agregar Ítems a la Lista</h1>

    <form id="itemForm">
        <input type="text" id="itemInput" placeholder="Escribe un ítem" required>
        <button type="submit">Agregar Ítem</button>
    </form>

    <ul id="itemList">
        <!-- Los ítems aparecerán aquí -->
    </ul>
         
    <script>
        // Seleccionamos el formulario y la lista de ítems
        const itemForm = document.getElementById('itemForm');
        const itemInput = document.getElementById('itemInput');
        const itemList = document.getElementById('itemList');

        // Añadimos un listener para el envío del formulario
        itemForm.addEventListener('submit', function(event) {
            event.preventDefault(); // Evitar que la página se recargue

            // Obtener el valor del input
            const newItemText = itemInput.value;

            // Crear un nuevo elemento li
            const newItem = document.createElement('li');
            newItem.textContent = newItemText;

            // Añadir el nuevo ítem a la lista
            itemList.appendChild(newItem);

            // Limpiar el campo de entrada de texto
            itemInput.value = '';
        });
    </script>

</body>