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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
addRange
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
Selection, the interface this method belongs to