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

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

setEndPoint method (TextRange)

Browser support:

Aligns the start or end point of the current TextRange to the start or end point of the specified TextRange.

Syntax:

object.setEndPoint (type, textRange);

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

Parameters:

type

Required. String that specifies the two boundary points to align.

One of the following values:

EndToEnd

Aligns the end point of the current TextRange to the end point of the specified TextRange.

EndToStart

Aligns the end point of the current TextRange to the start point of the specified TextRange.

StartToEnd

Aligns the start point of the current TextRange to the end point of the specified TextRange.

StartToStart

Aligns the start point of the current TextRange to the start point of the specified TextRange.

textRange

Required. Specifies the TextRange object to align.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the setEndPoint method:

<head>
    <script type="text/javascript">
        function DelFromContainer () {
            var container = document.getElementById ("container");
            if (container.childNodes.length > 1) {
                if (document.body.createTextRange) {
                    var containerRange = document.body.createTextRange ();
                    containerRange.moveToElementText (container);
                    var leaveRange = document.body.createTextRange ();
                    leaveRange.moveToElementText (container.childNodes[1]);
                    
                    containerRange.setEndPoint ("EndToStart", leaveRange);
                    containerRange.execCommand ('delete', false, null);
                }
                else {
                    alert ("Your browser does not support the createTextRange method!");
                }
            }
        }
    </script>
</head>
<body>
    <div id="container">Delete from the container <b>Leave in the container</b></div>
    <button onclick="DelFromContainer ()">Delete an element from the container!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements a cross-browser solution for the previous one:

<head>
    <script type="text/javascript">
        function DelFromContainer () {
            var container = document.getElementById ("container");
            if (container.childNodes.length > 1) {
                if (document.body.createTextRange) {
                    var containerRange = document.body.createTextRange ();
                    containerRange.moveToElementText (container);
                    var leaveRange = document.body.createTextRange ();
                    leaveRange.moveToElementText (container.childNodes[1]);
                    
                    containerRange.setEndPoint ("EndToStart", leaveRange);
                    containerRange.execCommand ('delete', false, null);
                }
                else {
                    var containerRange = document.createRange ();
                    containerRange.selectNodeContents (container);
                    // Moves the end point of the range to the start of the second child of the container element
                    containerRange.setEnd (container, 1);
                    containerRange.deleteContents ();
                }
            }
        }
    </script>
</head>
<body>
    <div id="container">Delete from the container <b>Leave in the container</b></div>
    <button onclick="DelFromContainer ()">Delete an element from the container!</button>
</body>