W3cubDocs

/Web APIs

Highlight: add() method

Baseline 2025

Newly available

Since ⁨June 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The add() method of the Highlight interface adds a new Range object to a highlight, to be styled using the CSS Custom Highlight API.

Highlight is a Set-like object, so this is similar to using Set.add().

Syntax

add(range)

Parameters

range: A Range object to add to the Highlight.

Return value

The Highlight object, with the added range.

Examples

The code snippet below shows how to add two ranges to a new highlight object:

const highlight = new Highlight();

const range1 = new Range();
const range2 = new Range();

highlight.add(range1).add(range2);

console.log(highlight.size); // 2

Specifications

Specification
ECMAScript® 2026 Language Specification> # sec-set.prototype.add>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`add`	105	105	140	91	17.2	105	140	72	17.2	20.0	105	17.2