JavaScript 移动元素
Ammar Ali
2021年10月2日
本教程将讨论使用 JavaScript 中的 appendChild() 函数将一个元素的子元素移动到另一个父元素。
使用 JavaScript 中的 appendChild() 函数将一个元素的子元素移动到另一个父元素
我们可以使用 appendChild() 函数在 JavaScript 中将一个元素的子元素移动到另一个父元素。appendChild() 函数将一个孩子添加到给定的父母。首先，我们必须在 JavaScript 中获取元素，我们可以使用 getElementById() 或 querySelector() 函数来完成。之后，如果有多个孩子，我们必须使用循环将每个孩子移动到给定的父母。循环将一一添加所有子项，并在没有更多子项添加到父项时终止。例如，让我们创建两个带有一些子元素的元素，然后使用 appendChild() 函数将一个元素的子元素移动到另一个元素。请参考下面的代码。
<!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>
输出：
NodeList(3) [text, span, text]
在上面的代码中，第一个父元素没有任何子元素，第二个父元素有一个子元素。正如你在输出中看到的，循环后的第一个父元素也与第二个父元素具有相同的子元素。我们使用 console.log() 函数来显示第一个父元素的子元素。你还可以将此代码转换为函数，这样你就不必再次编写整个代码。例如，让我们将上面的代码翻转到一个函数中，该函数将接受两个包含两个父元素的 id 的字符串参数。该函数会将第二个参数的子项添加到第一个参数的父项中。请参考下面的代码。
<!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>
输出：
NodeList(3) [text, span, text]
现在，你可以随时使用此函数将一个元素的子元素移动到另一个元素的父元素。
Author: Ammar Ali
