如何使用javascript将类添加到子元素？

Question

I have html like this, which is a list with a series of file names:

<ul>
    <li class="attachment"><i></i> somefile.pdf</li>
    <li class="attachment"><i></i> somefile.csv</li>
</ul>

I'd like to add the class to the "i" element rather than the attachment div, but I can't figure out how do it.

function addIcon() {
    var att = document.getElementsByClassName('attachment');

    for (var i = 0; i < att.length; i++)
    {
       if (att[i].innerHTML.indexOf(".csv") != -1) {

           att[i].className += " icon-file-excel";
       }
       else if (att[i].innerHTML.indexOf(".xls") != -1) {

           att[i].className += " icon-file-excel";
       }
       else if (att[i].innerHTML.indexOf(".pdf") != -1) {

           att[i].className += " icon-file-pdf";
       }
       else if (att[i].innerHTML.indexOf(".doc") != -1) {

           att[i].className += " icon-file-word";
       }
       else if (att[i].innerHTML.indexOf(".jpg") != -1) {

           att[i].className += " icon-file-image";
       }
       else if (att[i].innerHTML.indexOf(".tif") != -1) {

           att[i].className += " icon-file-image";
       }
       else if (att[i].innerHTML.indexOf(".png") != -1) {

           att[i].className += " icon-file-image";
       }
       else if (att[i].innerHTML.indexOf(".doc") != -1) {

           att[i].className += " icon-file-word";
       }
       else{
           att[i].className += " icon-file-text";
       }
    }
}

Answer 1

childNodes[0] or firstChild are the things you're probably looking for

att[i].childNodes[0].className += " icon-file-excel";

or

att[i].firstChild.className += " icon-file-excel";