Create HTML select option using properties or attributes

Question

I want to programmatically create a selected HTML select option using Javascript (not jQuery). What are the merits of creating it by setting the attributes as follows:

var option = document.createElement('option');
option.setAttribute('text', 'option1');
option.setAttribute('value', 5);
option.setAttribute("selected", true);

as opposed to setting properties:

var option = document.createElement('option');
option.text = 'option1';
option.value = 5;
option.selected = true;

I'd prefer to create the options using properties but just want to be sure that this isn't going to cause any issues, as many of the examples I've come across on the web tend to favour using the former approach (i.e. setting attributes).

Answer 1

setAttribute should be used on DOM elements and lowercases the attribute name on HTML elements. You can't use dot notation to assign values to dynamic attribute names.

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val).

So in summary, use setAttribute if you have dynamic attribute names. If you have normal attributes, use dot notation.