Range: cloneContents() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die cloneContents()-Methode des Range-Interfaces kopiert die ausgewählten Node-Kinder des commonAncestorContainer des Bereichs und platziert sie in einem neuen DocumentFragment-Objekt.

Knoten werden unter Verwendung desselben Algorithmus wie bei Node.cloneNode() geklont, was bedeutet, dass mit Skripten angehängte Event-Listener nicht geklont werden. HTML-id-Attribute werden geklont, was durch Cloning zu einem ungültigen Dokument führen kann.

Die ersten und letzten ausgewählten Kinder von commonAncestorContainer können teilweise ausgewählt sein. In diesem Fall wird der Kindknoten selbst geklont, aber sein Inhalt ist nur der ausgewählte Teil, indem rekursiv der Bereich zwischen der Start-/End-Grenze des ursprünglichen Bereichs und der End-/Start-Grenze dieses Kindknotens geklont wird.

<p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p>
       ^----------- selection ------------^

cloneContents() returns:

<p>graph 1</p><p>paragraph 2</p><p>para</p>

Syntax

cloneContents()

range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);