When to use setAttribute vs .attribute= in JavaScript?

javascript attributes setattribute
Francisc picture Francisc · Oct 12, 2010 · Viewed 120.3k times · Source

Has a best-practice around using setAttribute instead of the dot (.) attribute notation been developed?

E.g.:

myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");

or

myObj.className = "nameOfClass";
myObj.id = "someID";

Answer

olan picture olan · Jan 10, 2014

From Javascript: The Definitive Guide, it clarifies things. It notes that HTMLElement objects of a HTML doc define JS properties that correspond to all standard HTML attributes.

So you only need to use setAttribute for non-standard attributes.

Example:

node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works

Related questions

Angularjs dynamically set attribute

I'm trying to dynamically add attribute to div in controller in angular js. var table = document.getElementById("div_id").setAttribute("ng-click", "function_name()"); $scope.$apply(); Everything looks fine, in the debugger i see that attribute was added but it doesn't …

Read More
set option "selected" attribute from dynamic created option

I have a dynamically created select option using a javascript function. the select object is <select name="country" id="country"> </select> when the js function is executed, the "country" object is <select name="country" id="…

Read More
Get all Attributes from a HTML element with Javascript/jQuery

I want to put all attributes in a Html element into an array: like i have a jQuery Object, whichs html looks like this: <span name="test" message="test2"></span> now one way is to use …

Read More