So klonen Sie einen Abschnitt in JavaScript

Bei der Frontend-Entwicklung müssen wir häufig ein HTML-Element kopieren oder klonen und es an anderen Stellen auf der Webseite einfügen. Dieser Vorgang kommt sehr häufig vor, insbesondere bei der dynamischen Generierung von Tabellen, Listen, Menüs, Formularen und anderen Elementen. In JavaScript können wir viele Methoden zum Klonen von Abschnitten verwenden. In diesem Artikel werden Ihnen einige davon vorgestellt.

1. Verwenden Sie die cloneNode()-Methode

cloneNode() ist eine Methode zum Klonen von Knoten in JavaScript. Wir können sie zum Kopieren eines Knotens verwenden. Es verfügt über einen booleschen Parameter, der angibt, ob alle untergeordneten Knoten unter dem Knoten gleichzeitig geklont werden sollen. Wenn der Parameter wahr ist, werden die untergeordneten Knoten zusammen geklont.

Das Folgende ist ein Beispiel für die Verwendung der cloneNode()-Methode zum Klonen eines einzelnen Knotens oder mehrerer Knoten:

// 克隆单个节点
var originalNode = document.getElementById("original");
var clonedNode = originalNode.cloneNode(true);
document.body.appendChild(clonedNode);

// 克隆多个节点
var originalNodes = document.getElementsByClassName("original");
for (var i = 0; i < originalNodes.length; i++) {
  var clonedNode = originalNodes[i].cloneNode(true);
  document.body.appendChild(clonedNode);
}

Im obigen Code verwenden wir die cloneNode()-Methode und setzen die Parameter auf true, klonen den ursprünglichen Knoten und alle seine untergeordneten Knoten und hängte es an das Dokument an.

2. Verwenden Sie das innerHTML-Attribut.

Das innerHTML-Attribut gibt eine Zeichenfolge zurück, die das Element und seine Unterelemente enthält. Wir können dieses Attribut verwenden, um den Abschnitt zu klonen. Wir können den Wert des InnerHTML-Attributs auf den Wert des OuterHTML-Attributs des zu klonenden Knotens setzen und so den gesamten Knoten klonen.

Das Folgende ist ein Beispiel für die Verwendung des innerHTML-Attributs zum Klonen eines einzelnen Knotens oder mehrerer Knoten:

// 克隆单个节点
var originalHtml = document.getElementById("original").outerHTML;
document.body.insertAdjacentHTML("beforeend", originalHtml);

// 克隆多个节点
var originals = document.getElementsByClassName("original");
for (var i = 0; i < originals.length; i++) {
  var originalHtml = originals[i].outerHTML;
  document.body.insertAdjacentHTML("beforeend", originalHtml);
}

Im obigen Code erhalten wir zuerst den OuterHTML-Attributwert des Knotens, der geklont werden muss, und verwenden dann insertAdjacentHTML ()-Methode, um es in den DOM-Baum einzufügen. Im obigen Beispiel haben wir den Knoten am Ende des Dokuments eingefügt. Sie können ihn bei Bedarf an anderen Stellen einfügen.

3. Verwenden Sie die clone()-Methode von jQuery.

jQuery ist eine sehr beliebte JavaScript-Bibliothek, die viele praktische Methoden zum Bearbeiten des DOM bietet. In jQuery können wir die Methode clone() verwenden, um einen Knoten zu kopieren. Diese Methode ähnelt der cloneNode()-Methode in JavaScript, ist jedoch bequemer und einfacher zu verwenden.

Das Folgende ist ein Beispiel für die Verwendung der clone()-Methode von jQuery zum Klonen eines einzelnen Knotens oder mehrerer Knoten:

// 克隆单个节点
var $original = $("#original");
var $cloned = $original.clone();
$("body").append($cloned);

// 克隆多个节点
var $originals = $(".original");
$originals.each(function() {
  var $cloned = $(this).clone();
  $("body").append($cloned);
});

Im obigen Code verwenden wir zuerst den jQuery-Selektor, um den Knoten abzurufen, der geklont werden muss, und verwenden ihn dann Mit der Methode clone() wird der Knoten geklont und an das Dokument angehängt.

4. Zusammenfassung

Die oben genannten Methoden zum Klonen von Abschnitten mithilfe von JavaScript und jQuery. In der tatsächlichen Entwicklung können wir je nach Bedarf unterschiedliche Methoden auswählen. Die cloneNode()-Methode ist eine native JavaScript-Methode, die sehr schnell und effizient ist, aber auch die Verwendung des innerHTML-Attributs ist sehr praktisch. Wenn Sie jQuery verwenden, ist gleichzeitig auch die Methode clone () eine gute Wahl. Für welche Methode Sie sich auch entscheiden, Sie sollten bedenken, dass das ultimative Ziel darin besteht, den Knoten und alle seine untergeordneten Knoten an einen neuen Speicherort zu klonen, und Sie sollten beim Umgang mit untergeordneten Knoten besonders auf die Details achten.

Das obige ist der detaillierte Inhalt vonSo klonen Sie einen Abschnitt in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!