Write jQuery code to add a new list item from a text field

Description: When the user clicks “Add”, the text of the input must be added as a new list item, and the input must be cleared. Do not add empty text.

Hint:

• Use .val(), $('<li>').text(...) and .append().

---

HTML of the page

<input type="text" id="task" value="Buy milk">
<button id="add">Add</button>
<ul id="todo"></ul>

Solution

$('#add').on('click', function () {
  var text = $('#task').val().trim();

  if (text === '') {
    return;
  }

  $('<li>').text(text).appendTo('#todo');
  $('#task').val('');
});

$('#add').click();

How it works

• trim() removes spaces, so an empty text is not added.
• We create the li and set the text with .text(), which is safe against HTML in the input.
• .val('') clears the field.

Read Add Elements.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.