Range: surroundContents() Methode

Die Range.surroundContents() Methode verschiebt den Inhalt des Range in einen neuen Knoten und platziert den neuen Knoten am Anfang des angegebenen Bereichs.

Diese Methode ist nahezu gleichwertig zu newNode.appendChild(range.extractContents()); range.insertNode(newNode). Nach dem Umgeben beinhalten die Randpunkte des range newNode.

Eine Ausnahme wird jedoch ausgelöst, wenn der Range einen nicht-Text Knoten mit nur einem seiner Randpunkte teilt. Das bedeutet, im Gegensatz zu der oben genannten Alternative, dass teilweise ausgewählte Knoten nicht geklont werden und stattdessen die Operation fehlschlägt.

surroundContents(newParent)

<span class="header-text">Put this in a headline</span>

const range = document.createRange();
const newParent = document.createElement("h1");

range.selectNode(document.querySelector(".header-text"));
range.surroundContents(newParent);