My code does not append child, instead it replaces the first child. I've checked my code and can't figure out. Help Pls.

let updateButton = document.querySelector('button.update');
let updateHeadingInput = document.querySelector('input.updateHeading');
let updateDescriptionInput = document.querySelector('input.updateDescription');
let theHeading = document.getElementById('myHeading');
let headingDescription = document.getElementById('headingDescription');
let p = document.querySelector('p.description')
let hideListItemsButton = document.querySelector('button.hideListItems');
let listItems = document.querySelector('div.listItems');
let addListItem = document.querySelector('button.addListItem');
let addListItemButton = document.querySelector('button.addListItemButton');
let addListItemInput = document.querySelector('input.addListItemInput');
//Add eventlistiner to handle on click. 
updateButton.addEventListener('click', () => {

    theHeading.textContent = updateHeadingInput.value;
    headingDescription.textContent = updateDescriptionInput.value;
    updateDescriptionInput.value = '';       
    });

 hideListItemsButton.addEventListener('click', () =>{
       if(listItems.style.display == "block") {
            hideListItemsButton.textContent = "Show List";
            listItems.style.display = "none";
          }else{
            hideListItemsButton.textContent = "Hide List";
            listItems.style.display = "block";
          } 
  });

addListItemButton.addEventListener('click', () => {
   let ul = document.getElementsByTagName('ul')[0];
   let li = document.querySelector('li'); 
   li.textContent = addListItemInput.value;
   ul.appendChild(li);
   addListItemInput.value = '';
   }); ```