JavaScript Document createRange() Method

What You’ll Learn

document.createRange() is an instance method that returns a new Range object (see MDN Document: createRange()). Learn the default collapsed boundaries, how to set start/end points, useful Range helpers, how Ranges relate to Selection, and five try-it labs.

Introduction

A Range describes a continuous slice of the document — from one boundary point to another. Editors, find-in-page features, and “highlight this word” tools all lean on Ranges.

document.createRange() gives you a fresh Range. MDN: its start and end both begin at offset 0 of the Document on which you called the method. That default is almost never the slice you want, so the next step is always to set real boundaries.

MDN Notes: once a Range is created, you need to set its boundary points before you can make use of most of its methods.

Related tutorials: createElement(), createDocumentFragment(), textContent.

Understanding document.createRange()

An instance method on Document (usually called as document.createRange() on the live page document).

• No parameters — MDN lists none.
• Return value — a new Range object (MDN).
• Initial boundaries — start and end at offset 0 of that Document (MDN).
• Collapsed — start equals end until you widen the range.
• Configure — setStart, setEnd, selectNode, selectNodeContents, and more.
• Not a visible selection by itself — use the Selection API to show a highlight in the browser UI.

📝 Syntax

General form of Document.createRange (MDN):

createRange()

Parameters

None (MDN).

Return value

The created Range object (MDN).

Exceptions

None listed for createRange() itself on MDN. Boundary methods such as setStart / setEnd can throw if nodes or offsets are invalid.

MDN example

const range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

⚖️ Range vs Selection vs Fragment

Examples Gallery

Examples follow MDN Document: createRange() and practical Range patterns for beginners.

const p = document.querySelector("#sample");
const text = p.firstChild; // text node: "Hello Range"

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

console.log(range.toString()); // "Hello"

Hello

const range = document.createRange();

console.log(range.startContainer === document); // true (MDN: Document)
console.log(range.startOffset);                 // 0
console.log(range.endOffset);                   // 0
console.log(range.collapsed);                   // true
console.log(range.toString());                  // ""

true
0
0
true
(empty string)

const box = document.querySelector("#box");
const range = document.createRange();
range.selectNodeContents(box);

console.log(range.toString()); // all text inside #box
console.log(range.collapsed);  // false (when #box has content)

Alpha Beta
false

const p = document.querySelector("#line");
const text = p.firstChild; // "Cut me out"

const range = document.createRange();
range.setStart(text, 0);
range.setEnd(text, 3); // "Cut"

const fragment = range.extractContents();
console.log(fragment.textContent); // "Cut"
console.log(p.textContent);        // " me out"

Cut
 me out

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

const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

console.log(sel.toString()); // same text as range.toString()

Highlight me

🚀 Common Use Cases

• Rich-text editors — wrap, delete, or move selected content.
• Programmatic highlights — select a word and show it via Selection.
• Find / replace UI — build ranges around matches, then extract or restyle.
• Measuring text — range.toString() or getBoundingClientRect().
• Insert at caret — collapsed ranges act like a caret position.
• Teaching DOM slices — contrast Range with element / fragment APIs.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• No parameters; returns a Range (MDN).
• Initial start/end: offset 0 of the Document (MDN).
• Set boundary points before relying on most Range methods (MDN Notes).
• A Range is not automatically a visible browser selection.
• Related: createDocumentFragment(), createElement(), textContent.

💡 Best Practices