How do I take input via html input tag on button click and add it to a list USING JQUERY

I am a student and currently learning jquery <– I am trying to make the function that will take input from the inputbox and then add it to the unordered list as an EXTRA

Using jQuery create an input and a button. When clicking on the button it should invoke a function addToList that will use the input’s value to add it to the toDos variable. Make sure to render it on the screen as a new list item in the unordered list.

const body = $("body");
const header = $("<header>Todo List</header>");
const unorderedList = $("<ul>unorderedlist</ul>");
const testButton = $("<button>testButton</button>")
const inputBox = $("<input></input>")
var toDos = ["wake up", "eat breakfast", "code"];


$("<ul>")
  .append(toDos.map((text) => $("<li>", { text })))
  .appendTo(document.body);

testButton.on("click", () => {
    console.log("hello");
 .append(inputBox.text) => $("<li>", { text })
 .appendTo(document.body);
});


  body.append(header);
  body.append(unorderedList);
  body.append(inputBox);
  body.append(testButton);

Answer

You had several problems which I fixed:

const body = $("body");
const header = $("<header>Todo List</header>");
const unorderedList = $("<ul></ul>");
const testButton = $("<button>testButton</button>")
const inputBox = $("<input></input>")
var toDos = ["wake up", "eat breakfast", "code"];

// Add toDos to the <ul>
unorderedList.append(toDos.map((text) => $("<li>", { text })))

// Add click handler to button:
testButton.on("click", () => {
    console.log("hello");
    unorderedList.append($("<li>", { text: inputBox.val() }))
});

body.append(header);
body.append(unorderedList);
body.append(inputBox);
body.append(testButton);