Apply class with innerHTML

Use the className. If it is to add the class in the totalOp element, do the following:

function tipoOperacao(tipo){ 
    if (tipo.value == 'todas'){
        document.getElementById('totalOp').className = "classeA";
        document.getElementById('totalOp').innerHTML="Total de operações";
    } else if (tipo.value == 'cielo'){
        document.getElementById('totalOp').className = "classeB";
        document.getElementById('totalOp').innerHTML="Total de operações Cielo";
    }
}

To add and remove a specific class from the '#totalOp' element you can use the ClassList() that can be found in the classList property of your element.

A ClassList() has more than 2 methods, but these are the fundamental ones:

• ClassList().add : adds a class to the element;
• ClassList().remove : Removes a class from the element.

function tipoOperacao(tipo){ 
    if (tipo.value == 'todas'){
        document.getElementById('totalOp')).classList.add("classe");
        document.getElementById('totalOp').innerHTML="Total de operações";
    } else if (tipo.value == 'cielo'){
        document.getElementById('totalOp').classList.remove("classe");
        document.getElementById('totalOp').innerHTML="Total de operações Cielo";
    }
}

It is impossible to apply a class to its element 'td' re-assigning innerHTML , which is only the inner HTML of itself. outerHTML that would be correct, so it would be laborious and problematic to the interior elements.

It is easier to use browser methods that allow you to easily manipulate an element's classes.

So far, according to the answers in these questions, we have two ways of manipulating the classes of an element:

• Re-assigning the property className (which is a setter).
• Taking the interface ClassList on the classList property, calling its methods add , remove , etc.

In my opinion it does not make much difference to re-assign className to an element that can contain up to a class, but it would be better to use ClassList() methods when modifying an element containing several classes, so you will not lose them.

It is not good to re-assign className when an element can have dynamic classes, but it is still possible to maintain classes with it, but in a more different way.

Then re-assigning className :

/* perdeu a classe 'ball' */
wow.className = "new-class";

/* agora só resta 1 bola, portanto 'wow' não foi removido */

.ball {
  background-color: #f05;
  border-radius: 100%;
  width: 50px;
  height: 50px;
}

<div class="ball"></div>
<div class="ball" id="wow"></div>

Using ClassList() :

wow.classList.add("new-class");

/* ainda restam 2 bolas */

.ball {
  background-color: #f05;
  border-radius: 100%;
  width: 50px;
  height: 50px;
}

<div class="ball"></div>
<div class="ball" id="wow"></div>