Selection: addRange() method

The Selection.addRange() method adds a Range to a Selection.

Syntax

addRange(range)

Parameters

range: A Range object that will be added to the Selection.

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

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

Selection API