How to add class attribute to a li tag by using Dom

Question

I have to add a class attribute to a li tag using DOM. And I'm very lost at it. This is what I've done, is it correct?

var d = document;
var ul = d.getElementsByTagName('ul');
var li = ul.getElementsByTagName('li');

for (var i = 0; i < li.length; i++) 
{
  var clases = d.createElement('class');
  clases.class = 'Bebida';
  li.appendChild(clases);
}

<ul>
  <li>Café</li>
  <li>Mate</li>
  <li>Té</li>
</ul>

Thanks.

Possible duplicate: [How do I add a class to a given element?](http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) — Lior Erez, Jan 11 '17 at 22:38
See [element.className on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) — Lior Erez, Jan 11 '17 at 22:39
There is no ``, `class` in this context is an attribute. An attribute is a "setting" of an element (i.e. `id=`, `class=`, `style=`, `height=` `disabled` `contenteditable`, etc.) — zer00ne, Jan 11 '17 at 23:54

Nico · Accepted Answer · 2017-01-11T22:45:27.163

From your Javascript you have a few issues.

First off

var ul = d.getElementsByTagName('ul');

This returns an array of ul elements therefore you cannot call var li = ul.getElementsByTagName('li') directly on the array.

You will need to iterate each ul in the array and get the li's from the array item such as.

var ul = d.getElementsByTagName('ul');
for (var u = 0; u < ul.length; u++) {
  var li = ul[u].getElementsByTagName('li')
}

Now just as the ul variable the li is also an array so you will need to iterate each li item in the array.

var ul = d.getElementsByTagName('ul');
for (var u = 0; u < ul.length; u++) {
  var li = ul[u].getElementsByTagName('li')
  for (var i = 0; i < li.length; i++) {

  }
}

The next problem is you dont create a class element. class is an attribute of the li element. This can be accessed via the className property on each element.

To make this work you can put it all together as.

var ul = d.getElementsByTagName('ul');
for (var u = 0; u < ul.length; u++) {
  var li = ul[u].getElementsByTagName('li')
  for (var i = 0; i < li.length; i++) {
    li[i].className = 'Bebida';
  }
}

Here is a JSFiddle for your review.

I must add one more point. The first loop of capturing the ul elements is irrelavant. You could skip this directly and capture all the li elements. This will reduce the amount of loops required.

Given that you are capturing all the ul elements and then capturing all the li for that ul you can simply get all the li elements from the document. This of course is only the case if you only want the li that are children of uls and not other elements (such as ol).

This can be reduced to.

var liArray = d.getElementsByTagName('li');
for(var i=0; i<liArray.length;i++)
    liArray[i].className = 'Bebida';

Super helpful and very well explained, thank you very much Nico ! — Nina, Jan 12 '17 at 04:01
You can seperate the class names with a space or use the `.classList` property. https://developer.mozilla.org/en/docs/Web/API/Element/classList — Nico, Jan 12 '17 at 05:19

How to add class attribute to a li tag by using Dom

1 Answers1