문서 객체 이동하기
appendChild() 메소드를 사용하면 문서 객체를 이동할 수도 있음
문서객체를 다른 문서 객체에 추가하면 문서 객체가 이동 복사가 아님
부모객체.appendChild(자식객체);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
*/
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 읽어들이고 생성하기
const divA = document.querySelector('#first'); // id 속성이 first인 태그를 반환
const divB = document.getElementById('second'); // id 속성이 second인 태그를 반환
const h1 = document.createElement('h1'); // h1 태그를 생성
h1.textContent = '이동하는 h1 태그';
// 서로 번갈아가면서 실행하는 함수를 구현
const toFirst = () => {
divA.appendChild(h1); // h1을 divA에 추가
setTimeout(toSecond, 1000); // 1초 후에 toSecond() 함수를 실행
}
const toSecond = () => {
divB.appendChild(h1); // h1을 divB에 추가
setTimeout(toFirst, 5000); // 5초 후에 toFirst() 함수를 실행
}
toFirst();
});
</script>
</head>
<body>
<div id="first">
<h1>첫 번재 div 태그 내부</h1>
</div>
<hr>
<div id="second">
<h1>두 번재 div 태그 내부</h1>
</div>
</body>
</html>
