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

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

endContainer property (Range)

Browser support:

9

Returns a reference to the deepest node in the DOM hierarchy that contains the end point of the current Range object.

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

Use it together with the endOffset property to get the exact end point of the current Range object.

Similarly, you can get the start point of a Range with the startContainer and startOffset properties.

If you want to modify the start or end point, use the setStart / setStartBefore / setStartAfter and the setEnd / setEndBefore / setEndAfter methods.
Or 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.

Syntax:

object.endContainer;

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

This property is read-only.

Possible values:

Reference to the deepest node that contains the end point of the Range object.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the endContainer property:

<head>
    <script type="text/javascript">
        function TestBoundary () {
            var mySpan = document.getElementById ("mySpan");
            if (document.createRange) {     // all browsers, except IE before version 9
                var myRange = document.createRange ();

                myRange.selectNodeContents (mySpan);
                alert ("The range starts at the " + myRange.startOffset + ". child of the " + myRange.startContainer.tagName + " element.");
                alert ("The range ends at the " + myRange.endOffset + ". child of the " + myRange.endContainer.tagName + " element.");

                var textNode = mySpan.firstChild;
                myRange.selectNodeContents (textNode);
                alert ("The range starts at the " + myRange.startOffset + ". character position of the textNode element.");
                alert ("The range ends at the " + myRange.endOffset + ". character position of the textNode element.");
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <button onclick="TestBoundary ()">Test the boundary positions of a range!</button>
    <br /><br />
    <span id="mySpan">The length of this text is 30.</span>
</body>