Comment cloner une section en JavaScript

Dans le développement front-end, nous devons souvent copier ou cloner un élément HTML et l'insérer à d'autres emplacements de la page Web. Cette opération est très courante, notamment lors de la génération dynamique de tableaux, listes, menus, formulaires et autres éléments. En JavaScript, nous pouvons utiliser de nombreuses méthodes pour cloner des sections, et cet article vous en présentera plusieurs.

1. Utilisez la méthode cloneNode()

cloneNode() est une méthode de clonage de nœuds en JavaScript Nous pouvons l'utiliser pour copier un nœud. Il possède un paramètre booléen qui spécifie s'il faut cloner tous les nœuds enfants sous le nœud en même temps. Si le paramètre est vrai, les nœuds enfants seront clonés ensemble.

Ce qui suit est un exemple d'utilisation de la méthode cloneNode() pour cloner un seul nœud ou plusieurs nœuds :

// 克隆单个节点
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);
}

Dans le code ci-dessus, nous utilisons la méthode cloneNode() et définissons les paramètres sur true, clonons le nœud d'origine et tous ses nœuds enfants et l'a attaché au document.

2. Utilisez l'attribut innerHTML

L'attribut innerHTML renvoie une chaîne contenant l'élément et ses sous-éléments. Nous pouvons utiliser cet attribut pour cloner la section. Nous pouvons définir la valeur de l'attribut innerHTML sur la valeur de l'attribut externalHTML du nœud à cloner, clonant ainsi le nœud entier.

Ce qui suit est un exemple d'utilisation de l'attribut innerHTML pour cloner un ou plusieurs nœuds :

// 克隆单个节点
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);
}

Dans le code ci-dessus, nous obtenons d'abord la valeur de l'attribut externalHTML du nœud qui doit être cloné, puis utilisons l'insertAdjacentHTML () pour l'insérer dans l'arborescence DOM. Dans l'exemple ci-dessus, nous avons inséré le nœud à la fin du document. Vous pouvez l'insérer à d'autres emplacements si nécessaire.

3. Utilisez la méthode clone() de jQuery

jQuery est une bibliothèque JavaScript très populaire qui fournit de nombreuses méthodes pratiques pour manipuler le DOM. Dans jQuery, nous pouvons utiliser la méthode clone() pour copier un nœud. Cette méthode est similaire à la méthode cloneNode() en JavaScript, mais elle est plus pratique et plus facile à utiliser.

Ce qui suit est un exemple d'utilisation de la méthode clone() de jQuery pour cloner un ou plusieurs nœuds :

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

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

Dans le code ci-dessus, nous utilisons d'abord le sélecteur jQuery pour obtenir le nœud qui doit être cloné, puis utilisons la méthode clone() pour cloner le nœud et il est joint au document.

4. Résumé

Ci-dessus sont plusieurs méthodes de clonage de sections à l'aide de JavaScript et jQuery. Dans le développement réel, nous pouvons choisir différentes méthodes en fonction des besoins. La méthode cloneNode() est une méthode JavaScript native, très rapide et efficace, mais il est également très pratique d'utiliser l'attribut innerHTML. En même temps, si vous utilisez jQuery, la méthode clone() est également un bon choix. Quelle que soit la méthode que vous choisissez, vous devez vous rappeler que le but ultime est de cloner le nœud et tous ses enfants vers un nouvel emplacement, et vous devez accorder une attention particulière aux détails lors de la gestion des nœuds enfants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!