JavaScript Element verschieben
In diesem Tutorial wird erläutert, wie die Kinder eines Elements mit der Funktion appendChild() in JavaScript auf ein anderes Elternelement verschoben werden.
Verschieben Sie die Kinder eines Elements mit der Funktion appendChild() in JavaScript zu einem anderen Elternteil
Wir können die Funktion appendChild() verwenden, um die untergeordneten Elemente eines Elements in JavaScript auf ein anderes übergeordnetes Element zu verschieben. Die Funktion appendChild() fügt dem angegebenen Elternteil ein Kind hinzu. Zuerst müssen wir die Elemente im JavaScript holen, was wir mit der Funktion getElementById() oder querySelector() erledigen können. Wenn es mehr als ein Kind gibt, müssen wir danach eine Schleife verwenden, um jedes Kind zum angegebenen Elternteil zu verschieben. Die Schleife fügt alle untergeordneten Elemente nacheinander hinzu und endet, wenn keine weiteren untergeordneten Elemente übrig sind, die dem übergeordneten Element hinzugefügt werden können. Lassen Sie uns zum Beispiel zwei Elemente mit einigen Kindern erstellen und die Kinder eines Elements mit der Funktion appendChild() in ein anderes verschieben. Siehe den Code unten.
<!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>
Ausgabe:
NodeList(3) [text, span, text]
Im obigen Code hat das erste Elternelement keine Kinder und das zweite Elternelement hat ein Kind. Wie Sie in der Ausgabe sehen können, hat das erste Elternelement nach der Schleife auch dasselbe Kind wie das zweite Elternelement. Wir haben die Funktion console.log() verwendet, um die Kinder des ersten Elternelements anzuzeigen. Sie können diesen Code auch in eine Funktion umwandeln, damit Sie nicht den gesamten Code erneut schreiben müssen. Lassen Sie uns beispielsweise den obigen Code in eine Funktion umwandeln, die zwei Zeichenkettenparameter akzeptiert, die die ID der beiden Elternelemente enthalten. Die Funktion fügt die untergeordneten Elemente des zweiten Arguments dem übergeordneten Element des ersten Arguments hinzu. Siehe den Code unten.
<!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>
Ausgabe:
NodeList(3) [text, span, text]
Jetzt können Sie diese Funktion jederzeit verwenden, wenn Sie die untergeordneten Elemente eines Elements in die übergeordneten Elemente eines anderen Elements verschieben möchten.
