Selection: addRange() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The Selection.addRange() method adds a
Range to a Selection.
Syntax
js
addRange(range)
Parameters
Return value
None (undefined).
Examples
Note that only Firefox supports multiple selection ranges. In this example, other browsers will not add new ranges to the selection if it already contains one.
HTML
html
<p>
I <strong>insist</strong> that you <strong>try</strong> selecting the
<strong>strong words</strong>.
</p>
<button>Select strong words</button>
JavaScript
js
let button = document.querySelector("button");
button.addEventListener("click", () => {
const selection = window.getSelection();
const strongElems = document.getElementsByTagName("strong");
if (selection.rangeCount > 0) {
selection.removeAllRanges();
}
for (const node of strongElems) {
const range = document.createRange();
range.selectNode(node);
selection.addRange(range);
}
});
Result
Specifications
| Specification |
|---|
| Selection API # dom-selection-addrange |
Browser compatibility
See also
Selection, the interface this method belongs to