Adding a class with DOM JavaScript

Question

Firstly, my question might be foolish. sorry about that. I'm newbie.

I try to understand DOM. That's why I'm trying to make a shopping list.

At my shopping list, when I add an item to my list I try to add a class as well. Also every item has their own delete button. But problem is I couldn't do add a class to new item. My code is like that 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>

and my 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)
}

Duplicate of [What do querySelectorAll and getElementsBy\* methods return?](/q/10693845/4642212). `HTMLCollection`s don’t have attributes, so there is no `setAttribute`. Also, use [`classList`](//developer.mozilla.org/docs/Web/API/Element/classList) instead. — Sebastian Simon, Aug 08 '21 at 10:54
[getElementsByTagName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName) returns HTMLCollection i.e. array like structure, so you can't use `setAttribute` on HTMLCollection. — DecPK, Aug 08 '21 at 10:59

score 0 · Answer 1 · answered Aug 08 '21 at 10:55

0

You can add the classname using the 'className' property on a Dom node like this.

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

list.className = 'your class name';

ul.appendChild(list)....

answered Aug 08 '21 at 10:55

Mohaimin

664
4
10

score 0 · Accepted Answer · answered Aug 08 '21 at 11:02

1) You can add directly class to the new item 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>

Adding a class with DOM JavaScript

2 Answers2