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

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

moveToElementText method (TextRange)

Browser support:


		10.5

Aligns the start and end points of the current TextRange object to the text content of the specified element.

New TextRange objects can be created with the createTextRange method.

Only the body and some other HTML elements support the createTextRange method. If you need to create a TextRange object that is aligned to the contents of an element that does not support the createTextRange method, then use the createTextRange method on the body and invoke the moveToElementText method with the required element.

If a TextRange object is created by the createTextRange method on an element that is different from the body, then the moveToElementText method can be used for its descendant elements.
When a TextRange object is created from the selection by the createRange method, then the moveToElementText method can be used for all elements in the subtree of the body.

In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, the Range object provides similar functionality to the TextRange object. To create a new Range object, use the createRange method, to move it, use the selectNode and selectNodeContents methods.

Syntax:

object.moveToElementText (element);

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

Parameters:

element

Required. Reference to the element to align to.

Return value:

This method has no return value.

Example HTML code 1:

This cross-browser example shows how the contents of an element can be deleted with range objects:

<head>
    <script type="text/javascript">
        function RemoveContent () {
            var srcObj = document.getElementById ("src");

            if (document.createRange) {     // all browsers, except IE before version 9
                var rangeObj = document.createRange ();
                rangeObj.selectNodeContents (srcObj);
                rangeObj.deleteContents ();
            }
            else {      // Internet Explorer before version 9
                var rangeObj = document.body.createTextRange ();
                rangeObj.moveToElementText (srcObj);
                rangeObj.select ();
                rangeObj.execCommand ('cut');
            }
        }
    </script>
</head>
<body>
    <div id="src" style="background-color:#e0a0b0; width:300px; height:50px;">The <b>contents</b> of the <i>source</i> element.</div>
    <br /><br />
    <button onclick="RemoveContent ();">Remove the contents of the source element!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to select the text content of an element:

<head>
    <script type="text/javascript">
        function SelectRed () {
            var redElement = document.getElementById ("red");
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                var rangeToSelect = document.createRange ();
                rangeToSelect.selectNodeContents (redElement);

                selection.removeAllRanges ();   // clears the current selection
                selection.addRange (rangeToSelect);
            } 
            else {  // Internet Explorer before version 9
                if (document.selection) {
                    var rangeToSelect = document.body.createTextRange ();
                    rangeToSelect.moveToElementText (redElement);
                    rangeToSelect.select ();
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="SelectRed ();">Select the red text!</button>
    <br /><br />
    <div id="red" style="color:red">This text will be selected!</div>
</body>