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

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

setEndAfter method (Range)

Browser support:

9

Sets the end position of the current Range to the end position of the specified node.

Note: The Range object and its setEndAfter method are supported in Internet Explorer from version 9.

The end position of a Range is the first position in the DOM hierarchy that is after the Range. If you want the specified node to be the first element in the DOM hierarchy that is after the current Range, use the setEndBefore method. To set the end position to a point that is not the start or end point of any node, use the setEnd method.

Similarly, the setStart, setStartBefore and setStartAfter methods set the start position of a Range.
If you want to align the boundary points of a Range to the start and end points of an element or its contents, use the selectNode or selectNodeContents method.
The boundary points of a Range object can be retrieved with the startContainer, startOffset, endContainer and endOffset properties.

Syntax:

object.setEndAfter (node);

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

Parameters:

node

Required. The end position of the current Range will be aligned to the end position of the element referenced by the node parameter.

Return value:

This method has no return value.

The setEndAfter (node) method is equivalent to the setEnd (parentNode, index) method, where the parentNode parameter refers to the parent node of the element specified by the node parameter and the value of the index parameter is the position after the position of the element referenced by the node parameter in the childNodes collection of the element referenced by the parentNode parameter.

Example HTML code 1:

This example illustrates the use of the setEndAfter method:

<head>
    <script type="text/javascript">
        function DeleteFirstRow () {
            var table = document.getElementById ("myTable");
            if (table.rows.length > 0) {
                var row = table.rows[0];
                if (document.createRange) {     // all browsers, except IE before version 9
                    var rangeObj = document.createRange ();
                        // aligns the range to the second character
                    rangeObj.setStartBefore (row);
                    rangeObj.setEndAfter (row);
                        // deletes the row
                    rangeObj.deleteContents ();
                }
                else {
                    alert ("Your browser does not support this example!");
                }
            }
        }
    </script>
</head>
<body>
    <table id="myTable">
        <tr>
            <td>First row, first cell</td>
            <td>First row, second cell</td>
        </tr>
        <tr>
            <td>Second row, first cell</td>
            <td>Second row, second cell</td>
        </tr>
    </table>
    <br /><br />
    <button onclick="DeleteFirstRow ()">Delete the first row!</button>
</body>