Dynamically create option elements in Javascript

javascript createelement html-select
GOTO 0 picture GOTO 0 · Apr 22, 2013 · Viewed 23.4k times · Source

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?

Answer

MaxArt picture MaxArt · Apr 22, 2013

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...

Related questions

The preferred way of creating a new element with jQuery

I've got 2 ways I can create a <div> using jQuery. Either: var div = $("<div></div>"); $("#box").append(div); Or: $("#box").append("<div></div>"); What are the drawbacks of using second …

Read More
Creating a div element inside a div element in javascript

I'm trying a very basic example of creating a div inside an already existing div. It doesn't seem to be working when I use: document.getElementbyId('lc').appendChild(element) but works fine when I do this: document.body.appendChild(element) …

Read More
Javascript Append Child AFTER Element

I would like to append an li element after another li inside a ul element using javascript, This is the code I have so far.. var parentGuest = document.getElementById("one"); var childGuest = document.createElement("li"); childGuest.id = "two"; I am …

Read More