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

You are here: Reference > JavaScript > client-side > selection and ranges > methods > createRange (document, XMLDocument)

createRange method (document, XMLDocument)

Browser support:

9

Creates an empty Range object.

Note: The createRange method is supported in Internet Explorer from version 9.

A Range object represents a contiguous part of the document. If you want to align a Range object to an element or to its contents, use the selectNode and selectNodeContents methods. For further details, see the page for the Range object.

The Range object is supported in Internet Explorer from version 9. In older Internet Explorer versions (and in newer ones as well), the TextRange object provides functionality similar to the Range object. To create a new TextRange object, use the createTextRange method.

Syntax:

object.createRange ( );

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

Return value:

Returns the newly created Range object.

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>