Home Library Learn Downloads Support Community
Sign in | United States - English | |
6 out of 246 rated this helpful Rate this topic

add Method

.NET Framework 3.0

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

Syntax

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

Copy 

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

Copy 

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

Copy 

<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
Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
IE8 / 9 HTMLElementSelect add() JScript Unspecified error
IE 8 with all updated hotfixes/patches
--------
JScript Debugger
Breaking on JScript runtime error - Unspecified error


IE 9 (default Browser mode)
---------
Does not work and with no errors reported


IE 9 with Compatibility View or set to IE8 (Browser mode)
---------
SCRIPT16386: No such interface supported


//-----------Sample test code on Windows 7
var mylist = document.getElementById('myselectedItems');    //defined as <select name="myselectedItems" id="myselectedItems" multiple="false">

var objOption = document.createElement('option');
mylist.add(objOption);                //Breaking on JScript runtime error - Unspecified error
                                                //fails also with null as second parameter (tested working on Firefox 4, Chrome 5 per DOM standard)
objOption.text = 'newText';
objOption.value = 'newValue';


Any fix expected or is deployment of IE 10 a necessity to have this supported?

Thanks for supporting the community!

www.leedesmond.com
History
unspecified error with opt groups
I got the same problem as stated in Unspecified error comment above. Adding an index value for the second argument of add fixed the problem(so looks like second argument is not optional as it is stated in documentation). Happens only in IE8+ versions.
History
Unspecified Error?
Let's say we have 2 pages:

page1:
<!-- blah blah blah ... -->
<select id="target">
</select>
<script language="javascript">
window.open("page2.htm");
</script>

page2:
<!-- blah blah blah ... -->
<script language="javascript">
var opnr = window.opener;
if ('undefined' != typeof(opnr)) {
    var t = opnr.getElementById('target');
    var opt = document.createElement('option');
    opt.innerHTML = 'Foo';
    opt.value = 'Bar';
    t.options.add(opt); // IE8 just throw an Error (Unspecified Error)
}
</script>

Firefox works just fine
some one, please tell me why IE cannot do this.
thanks
History
Invalid Argument error
Note that when you add an option to a select box, you must add it before setting it's value and/or text, otherwise you'll raise an Invalid Argument error.

[EDIT] This is NOT true. You can create an option, set its value and text properties and then add it to a select without any problem. The problem is that you cannot alter the innerHTML property before adding it to a select (but you should be using the text property and not the innerHTML property anyway!)[/EDIT]

This does not work:

 var oSelect = document.getElementById('mySelect');
 var oOption = document.createElement('option');
 oOption.innerHTML = 'My new option';
 oOption.value = 42;
 oSelect.options.add(oOption);
This does work:
 var oSelect = document.getElementById('mySelect');
 var oOption = document.createElement('option');
 oSelect.options.add(oOption);
 oOption.innerHTML = 'My new option';
 oOption.value = 42;


        

        

            History
        

        
        

        
        

        

             

             
               
                
            

            
            
              

                          
              
              

            
        

        
    

    




    
    

      
      

              Issue with OPTGroups 
                
        
 
        

            When adding an option to a select box that has select groups... specifying -1 or leaving the index null places the option in the last option group instead of the root select box.  Is there any solution to this?
        

        

            History
        

        
        

        
        

        

             

             
               
                
            

            
            
        

        
    

    




    
    

      
      

              TOTALLY DIFFERENT IMPLEMENTATION THAN ECMAScript 
                
        
 
        

            It should be noted that the implementation MS chose is NOT the ECMAScript approach.

the parameters for add(p1, p2) as defined by the ECMAScript group are:
HTMLElement, and HTMLElement (specifically options)


Further: this method is NOT compliant with the W3C DOM method, as indicated above. W3C also specifies the second argument to be a HTMLElement, described as "
The element to insert before, or null for the
	    tail of the list.". However if you try to supply null as the second argument to IE, you get a type mismatch error. See http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-94282980

        

        

            History
        

        
        

        
        

        

             

             
               
                
            

            
            
              

                          
              
              

            
        

        
    

    




    
    

      
      

              Correction 
                
        
 
        

            
For the example above,


oOption.innerText = "Two"; doesn't work


It should rather be


oOption.text = "Two";


[jsudds] Correction to the correction: innerText works, but is proprietary to Internet Explorer. If you're aiming for cross-browser, use the text property instead. [Oh, and getElementById(), too... :)]

        

        

            History