I’m building a simple "to-do list" app using HTML, CSS, and JavaScript. I want to allow users to add new tasks by typing into an input box and clicking a button. When the button is clicked, the task should appear as a new list item on the page
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<input type="text" id="taskInput" placeholder="Enter a task">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
// I'm not sure how to create a new list item dynamically
}
</script>
</body>
</html>
What is the best way to create a new <li> element dynamically and append it to the <ul>? Should I use inner HTML or create Element, and why?