HTML DOM createRange() Method

Namachila October 30, 2025

0 2 1 minute read

The createRange() method creates a new Range object for the document.

Syntax:

range = document.createRange();

Parameters: This method does not accept any parameters.

Return Value: This method returns the created Range.

Example: In this example, we will create a range using this method, a range should not be empty, so we will make starting and ending points in the range using setEnd() and setStart() method.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>zambiatek</h1> 
    <p id="parent"> 
        Child 1<br> 
        Child 2<br> 
    </p> 
  
    <script> 
        const example = document.getElementById('parent'); 
        const range = document.createRange(); 
        range.setStart(example, 0); 
        range.setEnd(example, 3); 
        console.log(range); 
        console.log(range.toString()); 
    </script> 
</body> 
  
</html> 

Output: In console, created range can be seen.

Supported Browsers:

Google Chrome
Edge
Firefox
Safari
Opera

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!