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

add method

[This documentation is preliminary and is subject to change.]

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

Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5

Syntax

object.add(element, before)

Standards information

Parameters

element [in]

Type: IHTMLElement

Object that specifies the element to add to the collection.
before [in, optional]

Type: VARIANT

Variant of type 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.

Internet Explorer 8 and later. Variant of type Object that specifies an element to insert before, or null to append the object to the collection.

Return value

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Remarks

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

This method adds an option element to a select block.

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.

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

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

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.

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

HTML
Copy 

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

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.

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

HTML
Copy 

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

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

See also

areas
controlRange
options
select
remove

 

 

Build date: 3/8/2012

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