Maison > Problème commun > utilisation du nœud clone

utilisation du nœud clone

zbt
Libérer: 2023-11-24 10:51:06
original
1611 Les gens l'ont consulté

En JavaScript, cloneNode() est une méthode utilisée pour copier des nœuds. Peut être utilisé pour copier des nœuds d'éléments dans des documents HTML et vous pouvez choisir de copier ou non tous les nœuds enfants du nœud.

utilisation du nœud clone

En JavaScript, cloneNode() est une méthode utilisée pour copier des nœuds. Il peut être utilisé pour copier des nœuds d'éléments dans un document HTML et vous pouvez choisir de copier ou non tous les nœuds enfants du nœud. La méthode cloneNode() est La méthode fournie par DOM (Document Object Model), voici son utilisation de base :

var originalNode = document.getElementById("originalElement");
var clonedNode = originalNode.cloneNode(true);
Copier après la connexion

Dans le code ci-dessus, originalNode Représente le nœud d'origine à copier, qui peut être n'importe quel élément HTML. Le paramètre true dans cloneNode(true) signifie copier le nœud et tous ses nœuds enfants. Si false est passé, seul le nœud lui-même sera copié.

Il convient de noter que la méthode cloneNode() copiera uniquement les attributs de l'élément lui-même et de tous ses éléments enfants, mais ne copiera pas les écouteurs d'événements ni les données ajoutées à l'élément d'origine. Dans le même temps, le nœud copié sera séparé du flux de documents, ce qui signifie qu'il s'agit d'une copie totalement indépendante en mémoire. Toute opération sur le nœud copié n'affectera pas le nœud d'origine.

Voici un exemple plus complet illustrant l'utilisation de cloneNode() :

<!DOCTYPE html>
<html>
<body>
<div id="original">Original Node
  <span>Subnode 1</span>
  <span>Subnode 2</span>
</div>
<button onclick="cloneElement()">Clone Node</button>
<script>
function cloneElement() {
  var originalNode = document.getElementById("original");
  var clonedNode = originalNode.cloneNode(true);
  clonedNode.id = "cloned"; // 修改克隆节点的id属性
  document.body.appendChild(clonedNode);
}
</script>
</body>
</html>
Copier après la connexion

Dans l'exemple ci-dessus, cliquez sur "Clone Node" Le bouton clonera le nœud d'origine et l'ajoutera à la fin du document. Vous pouvez ouvrir cet exemple dans un navigateur et cliquer sur le bouton pour voir un clone du nœud d'origine ajouté à la page. La méthode

cloneNode() est un outil très utile qui peut nous aider à créer et gérer dynamiquement des nœuds d'éléments en JavaScript sans affecter le nœud d'origine.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal