In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > methods > addElement (controlRange)

addElement method (controlRange)

Browser support:

Inserts a control into the controlRange collection at the last position.

A control can be a button, select, textarea, one of the input elements or an arbitrary element in contentEditable mode.

The addElement method is identical to the add method.

To remove an element from a controlRange collection, use the remove method.

Syntax:

object.addElement (control);

You can find the related objects in the Supported by objects section below.

Parameters:

control

Required. Reference to the control to add.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the addElement method:

<head>
    <script type="text/javascript">
        function Init () {
                // the 'multipleSelection' command throws an exception in Opera
            try {
                    // enables multiple selection in Internet Explorer
                document.execCommand("multipleSelection", false, true);
            }
            catch (e) {};
        }

        function SelectButtons () {
            var editor = document.getElementById ("editor");
            if (editor.createControlRange) {        //Internet Explorer
                var buttons = editor.getElementsByTagName ("button");

                var controlRange = editor.createControlRange ();
                for (var i = 0; i < buttons.length; i++) {
                    controlRange.addElement (buttons[i]);
                }

                controlRange.select ();
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body onload="Init ();">
    <div id="editor" contenteditable="true" style="background-color:#e0f0e0;">
        <button>Sample button</button>
        <br /><br />Sample text inside the editor.<br /><br />
        <button>Another button</button>
    </div>
    <br /><br />Click on the button below to select all buttons with the controlRange collection.<br /><br />
    <button onclick="SelectButtons ();">Select all buttons inside the editor!</button>
</body>