JavaScript/DOM/Node/cloneNode

Die Methode Node.cloneNode() erstellt eine identische Kopie eines Knotens, je nach Wunsch mit oder ohne zugehörige Unterknotenstruktur.

Syntax

var dupNode = node.cloneNode(deep);

Folgende Angaben sind nötig:

• node: Knoten, der dupliziert werden soll.
• dupNode: der duplizierte Knoten.
• deep:
  • true, wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen
  • false wenn nur der Knoten dupliziert werden soll

Anwendungsbeispiel

Beispiel ansehen …

<p id="Dolly">Dolly </p>

Das Beispiel enthält einen in einem p-Element notierten Text Dolly.

  function verdoppeln() {
    var dolly = document.getElementById('Dolly'),
        dolly2 = dolly.cloneNode(true);
    dolly.textContent += dolly2.textContent;
  }

Durch einen Klick auf den Button wird die Funktion verdoppeln aufgerufen.

Dort wird mit document.getElementById("Dolly") auf das p-Element zugegriffen. Dieses wird mit cloneNode() kopiert, und der Rückgabewert wird in der Variablen dolly2 gespeichert. Der Rückgabewert ist eine identische Kopie des Elementknotens des p-Elements. Als Parameter wird der Methode im Beispiel true übergeben. Das bedeutet, dass auch der Textinhalt des Elements mitkopiert wird. Um nur das Element ohne den Inhalt zu klonen, müssen Sie false übergeben.

Im Beispiel wird anschließend mit dolly.textContent der Inhalt des p-Elements angesprochen und mittels Zeichenkettenoperation um den Wert des Kindelements des Klons erweitert. Am Ende steht also Dolly Dolly als Inhalt in dem p-Element.

Beachten Sie: Der Einsatz von cloneNode() kann dazu führen dass die selbe ID im Dokument mehrfach existiert.

Weblinks

• W3C: cloneNode
• MDN: cloneNode()
• Mediaevent: cloneNode (Einfügen eines template-Elements)