How to change a html class with Javascript?

Question

I would like to Change a HTML class with JavaScript

HTML

<i id="test" class="fa">

How can I do it really simple?

Answer 1

Try this:

use .className to add and also get class name of particular element.

document.getElementById('test').className = "fa";

Answer 2

Aside from the className property, you can also use the much more elaborate classList property and its methods:

var ele = document.getElementById('test');
ele.classList.remove('fa');
ele.classList.add('ba');

You can also toggle() classes (with optional conditions!) and hence easily do without jQuery’s toggleClass() and its other class-related methods (like shown in the downvoted, accepted answer).

Answer 3

Try to use this in javascript:

 $("#test").removeClass("fa");
 $("#test").addClass("newClass");