如何 select 或给 class 名称以在 Li 元素中创建TextNode（） tekst

Question

I made a shopping list, now I want to strike through the items when I click on it. When I click on it now, the whole li item gets striked through(the marker and the deletebutton gets striked through now). I want to give the tekst in the list items I created in this script a class, but I can't get it working. this is the script where the list items is made:

    function createListElement() {
      var li = document.createElement("li");
      li.appendChild(document.createTextNode(input.value));
      li.classList.add("tekstje");
      ol.appendChild(li);
      input.value = "";
      
      var delBtn = document.createElement("BUTTON");  // Create a <button> element
      delBtn.classList.add("deletebtn");              // Give a class name
      delBtn.innerHTML = "X";                         // Insert text
      li.appendChild(delBtn);                         // Append <button> to <LI>
    }

I tried the classlist.add method and giving it a P class, but that doesn't seem to work. I also tried selecting it with:tekst

Answer 1

Override the CSS on the inner button. Or, just wrap the text within the li with a span and only add the strike through on the span .

 var ol = document.getElementById("theOl"); var input = document.getElementById("theInput"); function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); li.classList.add("tekstje"); ol.appendChild(li); input.value = ""; var delBtn = document.createElement("BUTTON"); // Create a <button> element delBtn.classList.add("deletebtn"); // Give a class name delBtn.innerHTML = "X"; // Insert text delBtn.onclick = function () { delBtn.parentNode.classList.add("all-done"); } li.appendChild(delBtn); // Append <button> to <LI> }

 .all-done { text-decoration: line-through; }.all-done button { text-decoration: none; }

 <ol id="theOl"></ol> <input id="theInput" value="test"> <button onclick="createListElement()">Add</button>