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
