본문 바로가기
2222
Stack & Tool/Node.js

appendChild를 사용할 때 한곳에만 있을 수 있다.

by PARK TAE JOON 2021. 5. 13.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
  <style>
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const first = document.querySelector('#first')
      const second = document.querySelector('#second')
      const h1 = document.createElement('h1');
      h1.textContent = '추가한 컨텐츠';
      const toFirst = () => {
        first.appendChild(h1);
        setTimeout(toSecond, 1000);
        console.log('1')
      }

      const toSecond = () => {
        second.appendChild(h1);
        setTimeout(toFirst, 1000);
        console.log('2')
      }
      toFirst()
    })  
  </script>
</head>
<body>
  <div id="first">
    <h1>first</h1>
  </div>
  <div id="second">
    <h1>second</h1>
  </div>
</body>
<script src="script.js"></script>

</html>

댓글