使用 DOM JavaScript 添加一个类答案

【问题标题】：Adding a class with DOM JavaScript使用 DOM JavaScript 添加一个类
【发布时间】：2021-10-12 10:31:08
【问题描述】：

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

我尝试理解 DOM。这就是我尝试制作购物清单的原因。

在我的购物清单中，当我向清单中添加一个项目时，我也会尝试添加一个类。此外，每个项目都有自己的删除按钮。但问题是我不能为新项目添加一个类。我的代码是这样的 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)
}

【问题讨论】：

What do querySelectorAll and getElementsBy* methods return? 的副本。 HTMLCollections 没有属性，所以没有setAttribute。另外，请改用classList。
顺便说一句，点击监听器在哪里？
getElementsByTagName 返回 HTMLCollection，即类似数组的结构，因此您不能在 HTMLCollection 上使用 setAttribute。

标签： javascript class dom dom-events

【解决方案1】：

1)您可以直接将类添加到新项目中

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>

【讨论】：

【解决方案2】：

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

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

list.className = 'your class name';

ul.appendChild(list)....

【讨论】：