Elemento de movimiento de JavaScript
Este tutorial discutirá cómo mover los hijos de un elemento a otro padre usando la función appendChild() en JavaScript.
Mueva los hijos de un elemento a otro padre usando la función appendChild() en JavaScript
Podemos usar la función appendChild() para mover los hijos de un elemento a otro padre en JavaScript. La función appendChild() agrega un hijo al padre dado. En primer lugar, tenemos que obtener los elementos en JavaScript que podemos hacer usando la función getElementById() o querySelector(). Después de eso, si hay más de un hijo, tenemos que usar un bucle para mover cada hijo al padre dado. el bucle agregará todos los hijos uno por uno y terminará cuando no queden más hijos para agregar al padre. Por ejemplo, creemos dos elementos con algunos hijos y mueva los hijos de un elemento a otro usando la función appendChild(). Vea el código a continuación.
<!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>
Producción :
NodeList(3) [text, span, text]
En el código anterior, el primer elemento padre no tiene hijos y el segundo elemento padre tiene un hijo. Como puede ver en la salida, el primer elemento principal también tiene el mismo elemento secundario que el segundo elemento principal después del bucle. Usamos la función console.log() para mostrar los hijos del primer elemento padre. También puede convertir este código en una función, por lo que no tiene que volver a escribir todo el código. Por ejemplo, volteemos el código anterior en una función que aceptará dos parámetros de cadena que contienen la identificación de los dos elementos padres. La función agregará los hijos del segundo argumento al padre del primer argumento. Vea el código a continuación.
<!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>
Producción :
NodeList(3) [text, span, text]
Ahora, puede usar esta función en cualquier momento que desee mover los hijos de un elemento al padre de otro elemento.
