why does it add an empty string?

It adds an empty string because there is no code telling it not to. Computers do the exact thing your code tells it to and nothing beyond that. Since the code for adding an item simply instructs JavaScript to take the text value from the field and add it, that's what it does. Whether the text input is empty or not does not matter at all.

As for how to avoid that you just have to explicitly write code to check if the input is empty and stop the function if it is.

The simplest way of coding that would probably be something like this:

addItemButton.addEventListener('click', () => {
  if (addItemInput.value.trim() === "") { // check if the (trimmed) input textbox is an empty string
      return;  // Return (stop the function) if that is the case 
  }
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appendChild(li);
  addItemInput.value = '';
});

There are two things in the above code you might not be familiar with. The first is trim(), that is simply a method that removes white space (spaces, tabs, etc) from the start and end of a string. Without that you could enter a space into the text input box and that would be considered a non empty string and would therefore be added.

The second is that I use the return keyword without specifying any value, this is because of the fact that I'm not using return in the way you are probably used to seeing it used. I'm not using it to pass some data from the function back to some other place, I'm simply making use of the fact that when a function returns it stops running, which means that all of the code below the return statement is not executed.