Élément de déplacement JavaScript
Ce didacticiel abordera le déplacement des enfants d’un élément vers un autre parent à l’aide de la fonction appendChild() en JavaScript.
Déplacer les enfants d’un élément vers un autre parent à l’aide de la fonction appendChild() en JavaScript
Nous pouvons utiliser la fonction appendChild() pour déplacer les enfants d’un élément vers un autre parent en JavaScript. La fonction appendChild() ajoute un enfant au parent donné. Tout d’abord, nous devons récupérer les éléments dans le JavaScript que nous pouvons faire en utilisant la fonction getElementById() ou querySelector(). Après cela, s’il y a plus d’un enfant, nous devons utiliser une boucle pour déplacer chaque enfant vers le parent donné. La boucle ajoutera tous les enfants un par un et se terminera lorsqu’il ne restera plus d’enfants à ajouter au parent. Par exemple, créons deux éléments avec des enfants et déplaçons les enfants d’un élément vers un autre en utilisant la fonction appendChild(). Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="First Parent Element"></div>
<div id="Second Parent Element">
<span>Hello World</span>
</div>
</body>
<script type="text/javascript">
var FirstParent = document.getElementById('First Parent Element');
var SecondParent = document.getElementById('Second Parent Element');
while (SecondParent.childNodes.length > 0) {
FirstParent.appendChild(SecondParent.childNodes[0]);
}
console.log(FirstParent.childNodes)
</script>
</html>
Production:
NodeList(3) [text, span, text]
Dans le code ci-dessus, le premier élément parent n’a pas d’enfant et le deuxième élément parent a un enfant. Comme vous pouvez le voir dans la sortie, le premier élément parent a également le même enfant que le deuxième élément parent après la boucle. Nous avons utilisé la fonction console.log() pour afficher les enfants du premier élément parent. Vous pouvez également convertir ce code en fonction, afin de ne pas avoir à réécrire tout le code. Par exemple, transformons le code ci-dessus en une fonction qui acceptera deux paramètres de chaîne contenant l’identifiant des deux éléments parents. La fonction ajoutera les enfants du deuxième argument au parent du premier argument. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="First Parent Element"></div>
<div id="Second Parent Element">
<span>Hello World</span>
</div>
</body>
<script type="text/javascript">
function MoveChildren(first, second){
var FirstParent = document.getElementById(first);
var SecondParent = document.getElementById(second);
while (SecondParent.childNodes.length > 0) {
FirstParent.appendChild(SecondParent.childNodes[0]);
}
}
MoveChildren('First Parent Element','Second Parent Element');
console.log(document.getElementById('First Parent Element').childNodes)
</script>
</html>
Production:
NodeList(3) [text, span, text]
Maintenant, vous pouvez utiliser cette fonction chaque fois que vous souhaitez déplacer les enfants d’un élément vers le parent d’un autre élément.
