Dynamically create option elements in Javascript

Question

What is the preferred way in Javascript to dynamically create DOM option elements? I've found both the Option constructor and the createElement variant used in actual code like this:

var option = new Option(text, value);

and this:

var option = document.createElement('option');
option.text = text;
option.value = value;

Are there any drawbacks/compatibility issues with any of those methods? Also, are there any other methods to create options dynamically that should be preferred to the above for some reasons?

MaxArt · Accepted Answer · 2013-04-22 10:11:36Z

13

There are no differences between the two methods that I know of. Using the Option constructor allows you to conveniently set the value and the text of the option, but you can do the same using the value and text properties.

There could have been the innerHTML way, but IE8 and older fail hard on this...

answered Apr 22, 2013 at 10:11

MaxArt

22.8k10 gold badges85 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nope Over a year ago

Though it will have no effect on the code, there is a minor difference. Using var option = new Option(); will result in option being an instance of the Option Object and option instanceof Option is true, while using var option = document.createElement('option'); will result in option being a literal and not an instance of the Option Object, hence option instanceof Option is false; Though both will have been created from the same constructor and option.constructor will be function HTMLOptionElement().

Doin Over a year ago

Nope, @Nope, that's not so. document.createElement("option") instanceof Option returns true, contrary to what you said. You would expect this, as however the object get created, it is an instance of the same kind of DOM object.

Nope Over a year ago

@Doin In 2013 that wasn't the case but good to know it is no longer so.

goe · Accepted Answer · 2014-11-12 16:25:24Z

1

I noticed for example that using new Option() doesn't work well under IE9 where it works in IE10 and IE11. I recently had go back to the original code and revert the change somebody did to go back using document.createElement('option') in order for IE9 to work.

answered Nov 12, 2014 at 16:25

goe

1,2532 gold badges15 silver badges24 bronze badges

1 Comment

Danny C Over a year ago

This is not entirely accurate. Where I work there is a large set of legacy code developed for IE6 that uses new Option(). Perhaps there is another issue in your code that's prevented it from working.

Collectives™ on Stack Overflow

Dynamically create option elements in Javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related