className – the name of the class to add as [[mdn>Web/JavaScript/Reference/Global_Objects/String|String]] object, or quoted string (required).
Returns:
The same [[mdn>API/HTMLElement|HTMLElement]] that it was called on, thus allowing for command chaining.
Notes:
* If the class to be added already exists, this method will do nothing.
* This method is a simple wrapper for the basic [[mdn>Web/API/Element/classList|classList]]''.add()'' function. The only difference is that this function returns the HTMLElement and thus allows chaining other functions for neater and/or more compact code.
==== Examples ====
Simple example:
let foo = document.getElementById('foo');
foo.addClass('bar');
Chaining methods allows for very compact code:
document.getElementById('foo').addClass('bar').attr('data-value', '123');
… that can also look very neat and readable:
document.getElementById('foo')
.addClass('bar')
.attr('data-value', '123')
;
===== See also =====
* [[toolbox:classes:removeclass:index|.removeClass()]]
* [[toolbox:classes:toggleclass:index|.toggleClass()]]
* [[toolbox:classes:hasclass:index|.hasClass()]]
===== More information =====
* [[mdn>Web/API/HTMLElement|HTMLElement]] on MDN.
* [[mdn>Web/API/Element/classList|classList]] on MDN.