Range.setEndAfter() — Methode · JavaScript-Referenz

Signatur

Range.prototype.setEndAfter(referenceNode)

Beschreibung

Range.setEndAfter() verschiebt den Endpunkt eines Range-Objekts an die Stelle unmittelbar hinter dem übergebenen Knoten. Technisch wird der Endcontainer auf den Elternknoten von referenceNode gesetzt und der End-Offset auf den Index von referenceNode in dessen childNodes plus 1.

Die Methode ist praktisch, wenn ein Bereich einen Knoten vollständig einschließen soll, ohne dass man Offsets selbst berechnen muss – etwa beim Markieren mehrerer benachbarter Elemente, beim Hervorheben von Absätzen oder beim Ausschneiden eines Blocks mit extractContents(). Zusammen mit setStartBefore() entspricht sie im Ergebnis selectNode(), erlaubt aber verschiedene Start- und Endknoten.

Liegt der neue Endpunkt vor dem aktuellen Startpunkt (in Dokumentreihenfolge) oder in einem anderen Dokument bzw. Baum, wird der Range automatisch kollabiert: Auch der Start wird auf den neuen Endpunkt gesetzt.

Parameter

Name	Typ	Default	Beschreibung
$referenceNode Pflicht	Node		Knoten, hinter dem das Ende des Bereichs liegen soll. Er muss einen Elternknoten besitzen.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Der Range wird direkt verändert.

Beispiele

Mehrere Listeneinträge in einen Bereich aufnehmen

// HTML: <ul id="liste"><li>A</li><li>B</li><li>C</li><li>D</li></ul>
const items = document.querySelectorAll('#liste li');
const range = document.createRange();

range.setStartBefore(items[1]); // vor "B"
range.setEndAfter(items[2]);    // hinter "C"

console.log(range.toString());
console.log(range.endContainer.id, range.endOffset);

BC liste 3

Bereich als Benutzerauswahl markieren

const start = document.querySelector('#abschnitt-1');
const ende = document.querySelector('#abschnitt-3');

const range = document.createRange();
range.setStartBefore(start);
range.setEndAfter(ende);

const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range); // Abschnitte 1–3 sind nun markiert

Knotenfolge ausschneiden und verschieben

const absaetze = document.querySelectorAll('article p');
const range = document.createRange();
range.setStartBefore(absaetze[0]);
range.setEndAfter(absaetze[1]);

// Erste beiden Absätze entfernen und in die Sidebar einfügen
const fragment = range.extractContents();
document.querySelector('aside').append(fragment);
console.log(document.querySelectorAll('article p').length);

z. B. 3 (vorher 5)

Automatisches Kollabieren

// HTML: <p id="a">Eins</p><p id="b">Zwei</p>
const range = document.createRange();
range.setStartAfter(document.getElementById('b'));
range.setEndAfter(document.getElementById('a')); // liegt vor dem Start

console.log(range.collapsed);

true

// Wichtig · Fallstricke

Hat referenceNode keinen Elternknoten (z. B. document selbst oder ein losgelöster Knoten ohne Parent), wird eine DOMException vom Typ InvalidNodeTypeError geworfen.
Ohne Argument wird ein TypeError ausgelöst.
Liegt das neue Ende vor dem Start oder in einem anderen Wurzelbaum, kollabiert der Range stillschweigend – es gibt keinen Fehler. Prüfen Sie ggf. range.collapsed.
Der Endpunkt bezieht sich auf den Elternknoten; wird das DOM danach verändert (z. B. Knoten davor eingefügt), passt der Browser die Offsets gemäß DOM-Spezifikation automatisch an.
Innerhalb eines Textknotens positionieren Sie stattdessen mit setEnd(node, offset).
Wird in allen modernen Browsern unterstützt (auch Internet Explorer 9+).

Siehe auch

Range.setEndBefore() Range.setStartAfter() Range.setStartBefore() Range.setEnd() Range.selectNode() Document.createRange() Range