This is the function where I add a new Item to my to-do list and I am adding span named "delete" to the end of my item as a button.

function newElement() {
count++;
  var li = document.createElement("li");
  var inputValue = document.getElementById("addNewItem").value;
  var t = document.createElement("Label");
  var checkB=document.createElement("input");
  checkB.setAttribute("type","checkbox");
  checkB.setAttribute("id",count);
  t.setAttribute("for",count);
  t.textContent=inputValue;
  t.appendChild(checkB);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You cannot add an empty element!");
  } else {
    document.getElementById("myList").appendChild(li);
  }
  document.getElementById("addNewItem").value = "";
<!--adding delete button to each new item-->
  var span = document.createElement("SPAN");
  span.className = "close";
  span.textContent="delete";
  console.log(span.textContent);
  li.appendChild(span);

}

Here I tried to change the text of span to "cancel". When I check it by console.log(span.textContent) the text looks changed as cancel but on the screen I still see the span as delete

var list = document.querySelector('ul');
list.addEventListener('click', function(e) {
  if (e.target.tagName === 'LABEL') {
     var li=e.target.parentElement;
     var label=e.target;
     label.style.textDecoration="line-through";
     var span=li.getElementsByTagName("span");
     span.textContent="cancel";
     completedTaskHolder.appendChild(li);
    }

it is still still delete