files/en-us/web/api/highlight/add/index.md
{{APIRef("CSS Custom Highlight API")}}
The add() method of the {{domxref("Highlight")}} interface adds a new {{domxref("Range")}} object to a highlight, to be styled using the {{domxref("css_custom_highlight_api", "CSS Custom Highlight API", "", "nocode")}}.
Highlight is a {{jsxref("Set")}}-like object, so this is similar to using {{jsxref("Set.add()")}}.
add(range)
range
Highlight.The Highlight object, with the added range.
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}}
{{Compat}}