CharacterData.before() — Methode · JavaScript-Referenz

Signatur

CharacterData.prototype.before(...nodes)

Beschreibung

Die Methode before() gehört zum Mixin ChildNode und steht auf allen CharacterData-Knoten zur Verfügung, also auf Text, Comment, CDATASection und ProcessingInstruction. Sie fügt die übergebenen Argumente in der angegebenen Reihenfolge als Geschwister unmittelbar vor dem aktuellen Knoten in dessen Elternknoten ein.

Übergebene Zeichenketten werden automatisch in Text-Knoten umgewandelt. Sie werden nicht als HTML interpretiert, deshalb ist die Methode sicher gegen XSS, wenn Nutzereingaben eingefügt werden. Knoten, die schon im Dokument stehen, werden verschoben und nicht kopiert.

Im Vergleich zu parentNode.insertBefore(neu, referenz) ist before() kürzer. Sie braucht keinen Verweis auf den Elternknoten und nimmt mehrere Knoten und Zeichenketten in einem Aufruf an. Das ist praktisch, wenn man Textknoten gezielt bearbeitet, zum Beispiel beim Hervorheben von Suchbegriffen oder beim Einfügen von Markierungen vor Kommentaren.

Parameter

Name	Typ	Default	Beschreibung
$...nodes	(Node \| string)[]		Null oder mehr Knoten bzw. Zeichenketten, die in dieser Reihenfolge vor dem Knoten eingefügt werden. Zeichenketten werden zu `Text`-Knoten.

Beispiele

Text vor einem Textknoten einfügen

const p = document.createElement('p');
p.append('Welt');
const text = p.firstChild; // Text-Knoten "Welt"

text.before('Hallo ');
console.log(p.textContent);
console.log(p.childNodes.length);

Hallo Welt 2

Element und Text gemischt vor einem Kommentar einfügen

const container = document.createElement('div');
const marker = document.createComment(' Ende der Liste ');
container.append(marker);

const strong = document.createElement('strong');
strong.textContent = 'Hinweis:';

// Mehrere Argumente – Reihenfolge bleibt erhalten
marker.before(strong, ' Liste vollständig geladen.');
console.log(container.innerHTML);

<strong>Hinweis:</strong> Liste vollständig geladen.

Suchbegriff in einem Textknoten hervorheben

const p = document.createElement('p');
p.textContent = 'JavaScript macht Spaß';

const highlight = (textNode, term) => {
  const idx = textNode.data.indexOf(term);
  if (idx === -1) return;
  // Knoten am Treffer aufteilen: textNode enthält danach nur den Anfang
  const rest = textNode.splitText(idx);
  rest.data = rest.data.slice(term.length);
  const mark = document.createElement('mark');
  mark.textContent = term;
  rest.before(mark); // <mark> direkt vor den Resttext setzen
};

highlight(p.firstChild, 'macht');
console.log(p.innerHTML);

JavaScript <mark>macht</mark> Spaß

Zeichenketten werden nicht als HTML interpretiert

const div = document.createElement('div');
div.append('Ende');

div.firstChild.before('<img src=x onerror=alert(1)> ');
console.log(div.innerHTML);

<img src=x onerror=alert(1)> Ende

// Wichtig · Fallstricke

Kein Elternknoten: Hat der Knoten keinen parentNode, zum Beispiel ein frisch erzeugter Text-Knoten, macht before() stillschweigend nichts. Es wird kein Fehler geworfen.
Verschieben statt Kopieren: Knoten, die schon im DOM hängen, werden an die neue Stelle verschoben. Für eine Kopie vorher node.cloneNode(true) aufrufen.
Ungültige Einfügungen lösen eine HierarchyRequestError-DOMException aus, etwa wenn ein Vorfahre des Knotens eingefügt werden soll.
Sicherheit: Zeichenketten werden als reiner Text eingefügt und sind damit XSS-sicher. Wer HTML-Markup braucht, muss Elemente selbst erzeugen oder insertAdjacentHTML() am Element verwenden, dann aber mit Bereinigung der Eingaben.
Benachbarte Textknoten werden nicht automatisch zusammengeführt. Dafür gibt es Node.normalize().
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 54+, Firefox 49+, Safari 10+, Edge 17+). Der Internet Explorer kennt die Methode nicht, dort hilft parentNode.insertBefore().

Siehe auch

CharacterData.after() CharacterData.replaceWith() CharacterData.remove() Element.before() Node.insertBefore() Text.splitText() CharacterData