添加 class 和 DOM JavaScript

Question

首先，我的问题可能很愚蠢。对于那个很抱歉。我是新手。

我试着去理解DOM。这就是为什么我要列一个购物清单。

在我的购物清单中，当我向清单中添加一个项目时，我也尝试添加一个 class。此外，每个项目都有自己的删除按钮。但问题是我无法将 class 添加到新项目。我的代码是这样的 html

<div class="container">
        <h1>Shopping List</h1>
        <p>Please write your ingredients</p>
        <input id="userinput" type="text" placeholder="Enter items">
        <button id="enter">Enter</button>
    <br>
        
        <ul>
            
        </ul>
        
    </div>

和我的javascript

var input = document.getElementById("userinput")
var ul = document.querySelector("ul");

function createListElement(){
    var list = document.createElement("li");
    list.appendChild(document.createTextNode(input.value));
    ul.appendChild(list)
    input.value ="";

    document.getElementsByTagName("ul").setAttribute("class", "done");


    var del = document.createElement("button");
    del.appendChild(document.createTextNode("Delete"));
    list.appendChild(del)
}

Answer 1

您可以像这样在 Dom 节点上使用 'className' 属性添加类名。

....list.appendChild(document.createTextNode(input.value));

list.className = 'your class name';

ul.appendChild(list)....

Answer 2

1) 可以直接在新项目中添加class as

list.setAttribute( "class", "done" );

var input = document.getElementById("userinput")
var ul = document.querySelector("ul");

function createListElement() {
  // Early return if input is empty
  if (input.value.trim() === "") return;

  var list = document.createElement("li");
  list.appendChild(document.createTextNode(input.value));

  // Add the class attribute on the list item
  list.setAttribute("class", "done");

  // Clear the input
  input.value = "";


  var del = document.createElement("button");
  del.appendChild(document.createTextNode("Delete"));
  list.appendChild(del)

  ul.appendChild(list)
}

const button = document.querySelector("button");
button.addEventListener("click", createListElement);

<div class="container">
  <h1>Shopping List</h1>
  <p>Please write your ingredients</p>
  <input id="userinput" type="text" placeholder="Enter items">
  <button id="enter">Enter</button>
  <br>

  <ul>
  </ul>
</div>

添加 class 和 DOM JavaScript

Adding a class with DOM JavaScript

javascript

dom

class

dom-events