자바스크립트 이동 요소
이 튜토리얼에서는 JavaScript의 appendChild() 함수를 사용하여 한 요소의 자식을 다른 부모로 이동하는 방법에 대해 설명합니다.
JavaScript의 appendChild() 함수를 사용하여 한 요소의 자식을 다른 부모로 이동
appendChild() 함수를 사용하여 JavaScript에서 한 요소의 자식을 다른 부모로 이동할 수 있습니다. appendChild() 함수는 지정된 부모에 자식을 추가합니다. 우선 getElementById() 또는 querySelector() 함수를 사용하여 수행할 수 있는 JavaScript의 요소를 가져와야 합니다. 그 후 자식이 둘 이상인 경우 루프를 사용하여 각 자식을 지정된 부모로 이동해야 합니다. 루프는 모든 자식을 하나씩 추가하고 부모에 추가할 자식이 더 이상 남아 있지 않으면 종료됩니다. 예를 들어, 일부 자식이 있는 두 개의 요소를 만들고 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]
이제 한 요소의 자식을 다른 요소의 부모로 이동하려는 경우 언제든지 이 기능을 사용할 수 있습니다.
