JavaScript Document createRange() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word CREATERANGE

Definition

document.createRange() returns a new Range object. MDN: its start and end both begin at offset 0 of the Document you called it on. Set real boundaries with setStart / setEnd (or helpers) before most Range methods are useful.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.createRange. Start with this line.

JavaScript
document.createRange()
CallWhat it does
document.createRange()Primary signature.
document.createRange(...)Call with the arguments your case needs.

Built into the browser. Call createRange(...) on document — no import required.

Library declarations
JavaScript
document.createRange()

Parameters

ParameterDescription
BoundariesRequired. Set before most Range methods (MDN Notes)

Return Value

Return ValueDescription
*A new Range

JavaScript Examples

Example 1 — setStart and setEnd (MDN)

Create a Range, bound it on a text node, then read the slice.

JavaScript
const p = document.querySelector("p");
const text = p.firstChild; // Text node

const range = document.createRange();
range.setStart(text, 0);
range.setEnd(text, 5);

console.log(range.toString()); // e.g. "Hello"
Try It Yourself

How It Works

  1. Create. createRange() returns a fresh Range (MDN).
  2. Pick a text node. Offsets count characters inside that node.
  3. Set boundaries. MDN example uses setStart then setEnd.
  4. Read text. toString() returns the characters inside the Range.

Example 2 — selectNodeContents

Cover everything inside an element in one call.

JavaScript
const p = document.querySelector("p");
const range = document.createRange();
range.selectNodeContents(p);

console.log(range.toString());
console.log(range.collapsed); // false (when the node has content)
Try It Yourself

How It Works

  1. Create the Range as usual.
  2. Call selectNodeContents(p) to span all children of p.
  3. Faster than manual offsets when you want the whole element body.
  4. Still not a UI selection until you add the Range to a Selection.

Example 3 — Default Collapsed Range

MDN: before you set boundaries, the Range sits at Document offset 0.

JavaScript
const range = document.createRange();

console.log(range.collapsed);                 // true
console.log(range.startContainer === document); // true
console.log(range.startOffset);               // 0
console.log(range.toString());                // ""
Try It Yourself

How It Works

  1. No args. createRange() only builds the object (MDN).
  2. Collapsed default. Start and end share Document offset 0.
  3. Empty string. toString() is empty until boundaries cover text.
  4. Set boundaries next before extract / delete / surround methods (MDN Notes).
Compatibility

Browser Support

Document.createRange() is a browser DOM API marked Baseline Widely available on MDN (since July 2015).

✓ Baseline Widely available

Document.createRange()

Create a Range for text slices, DOM surgery, and Selection highlighting.

Baseline Widely available
Google Chrome All modern versions
Yes
Microsoft Edge All modern versions
Yes
Mozilla Firefox All modern versions
Yes
Apple Safari All modern versions
Yes
Opera All modern versions
Yes
Internet Explorer IE 9+
Yes
createRange() Excellent in browsers

Bottom line: Safe in modern browsers. See the MDN createRange() reference.

Frequently Asked Questions

MDN: Document.createRange() returns a new Range whose start and end are both at offset 0 of the Document it was called on. You then set real boundaries with setStart, setEnd, or helpers like selectNodeContents.
No. MDN marks Document.createRange() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A new Range object (MDN). It does not select text in the UI by itself — attach it to a Selection (for example selection.addRange(range)) if you want a visible highlight.
No. createRange() takes no parameters (MDN). Boundaries are configured afterward.
MDN Notes: once a Range is created, you need to set its boundary points before you can make use of most of its methods. The default range is collapsed at the document.
createRange builds a Range you control in code. document.getSelection() / window.getSelection() reads (or updates) what the user currently selected. You often create a Range, then add it to the Selection to show a highlight.

Next: createTextNode()

Learn how to create text nodes for visible content in the DOM.

createTextNode() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

JavaScript Document createProcessingInstruction() Method JavaScript Document createTextNode() Method