Adds an element to the areas, controlRange, or options collection.

Syntax

object.add(oElement [, oBefore])

Parameters

oElement	Required. Object that specifies the element to add to the collection.
oBefore	Optional. Integer that specifies the index position in the collection where the element is placed. If no value is given, the method places the element at the end of the collection. Windows Internet Explorer 8 and later. Object that specifies an element to insert before, or null to append the object to the collection.

Return Value

No return value.

Remarks

Internet Explorer 8. In IE8 Standards mode, oBefore also accepts an Object that specifies the object before which to insert the element. For more information, see Defining Document Compatibility.

Before you can add an element to a collection, you must create it first by using the createElement method.

Examples

This example uses the add method to insert an object into the options collection of a select object. In Internet Explorer, the option element must be added to the collection prior to setting properties.

<select id="oSelect">
    <option value="1">One</option>
</select>

<script type="text/javascript">
var oSelect = document.getElementById('oSelect');
var oOption = document.createElement('OPTION');
// Add the option to the collection first, then set properties
oSelect.options.add(oOption);
oOption.innerHTML = "Two";
oOption.value = "2";
</script>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/add.htm

Alternatively, you can achieve the same result with less code by using the array syntax of the options collection to append a new Option element.

<script type="text/javascript">
var opts = document.getElementById('oSelect').options;
opts[opts.length] = new Option("Three","3");
</script>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/add.htm

In Internet Explorer 8 and later, the add method supports the standard way of specifying an object as an insertion point. The following code inserts the new Option in front of another option element already in the control.

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

<script type="text/javascript">
var sel = document.getElementById('oSelect');
sel.add(new Option("Four","4"), oOption);
</script>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/add.htm

Standards Information

This method is defined in Document Object Model (DOM) Level 1.

Applies To

areas, controlRange, options, SELECT, ControlRangeCollection Constructor, HTMLAreasCollection Constructor, HTMLSelectElement Constructor

See Also

remove