Creating, inserting and removing

If you pass $ an HTML tag instead of a selector, jQuery creates a new element. Until it is inserted, it exists only in memory. Inserting, moving and removing are done with separate methods.

Creating and appending

<ul id="tasks">
  <li>Buy bread</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $item = $('<li>').text('Call Oleg');
 
  $('#tasks').append($item);
 
  console.log($('#tasks li').length); // 2
</script>

$('<li>') creates an empty item, text() sets its text, append() adds it to the end of the list. The page shows two items.

Creating with settings

The second argument can be an object with text, classes and attributes:

<ul id="tasks"></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $item = $('<li>', {
    text: 'Write the report',
    class: 'task',
    'data-id': 3,
  });
 
  $item.append($('<button>', { text: 'Delete', class: 'delete' }));
  $('#tasks').append($item);
</script>

The list gets an item with a "Delete" button inside. The text key is safe for user input, just like the text() method.

Where to insert

Inserting an element that is already on the page moves it instead of copying. clone() makes a copy.

Removing

<ul id="tasks">
  <li class="done">Buy bread</li>
  <li>Call Oleg</li>
</ul>
<p id="note">Hint</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('.done').remove();
  $('#note').empty();
 
  console.log($('#tasks li').length); // 1
</script>

remove() takes the element off the page completely, together with its event handlers. empty() keeps the element but deletes all its content: the paragraph remains, now empty.

A to-do list from an array

Elements are usually created from data. In the project this code lives in script.js:

<ul id="tasks"></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const tasks = ['Buy bread', 'Call Oleg', 'Write the report'];
  const $list = $('#tasks');
 
  for (const title of tasks) {
    $list.append($('<li>').text(title));
  }
</script>

The loop creates one item per task. The page shows a list of three to-dos.

The same in plain JavaScript

$('<li>') corresponds to document.createElement('li'), append to the append() method, before/after to the element methods of the same names, remove() to element.remove().

Common mistake

Building markup from strings: $list.append('<li>' + title + '</li>'). The string is parsed as HTML, and a title containing tags becomes markup: the same vulnerability as with html(). Create the element and set its text with text() or the text key.