기초공사 (html,css,javascript)

과제중- replaceChild 예제 본문

academy/JavaScript

과제중- replaceChild 예제

에스프레소라떼 2024. 5. 10. 13:27

//

<!DOCTYPE html>
<html>
  <head>
    <title>DOM replaceChild() Method</title>
  </head>

  <body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2>DOM replaceChild() Method</h2>
    <p>Sorting Algorithm</p>
    <ul id="menu">
      <li>Homepage</li>
      <li>Services</li>
      <li>About</li>
      <li>Contact</li>
    </ul>

    <button onclick="Geeks()">Click Here!</button>

    <script>
      // 클릭하면 home이라는 classname을 가진 요소가 homepage대체하기.

      // click here클릭시 첫번쨰 자식요소 Insertion sort ---> heejung으로 바꾸기
      // 부모노드.replaceChild(new, old)
      function Geeks() {
        let li_exchange = document.createElement("li");
        li_exchange.textContent = "home";
        console.log(li_exchange); // home

        //
        let li_exchange_node = document.createTextNode("li");
        console.log(`텍스트노드: ${li_exchange_node}`); // li.로 나옴.

        let menu = document.getElementById("menu");

        let first = menu.children[0];
        console.log(menu.childNodes); // 모든 배열들이 나옴---nodelist
        console.log(menu.children); // html Collection
        console.log(first); // 첫번째 li가 나옴.

        menu.replaceChild(li_exchange, first);
      }
    </script>
  </body>
</html>

 

 

1

 

 

2

저작자표시

'academy > JavaScript' 카테고리의 다른 글

오픈API  (0) 2024.05.12
과제-타이머만들기-setInterval  (0) 2024.05.12
과제-board.html- 수정까지 되었지만 - 등록이 하나만 되는 코드  (0) 2024.05.10
복습-board.html - Array-fill-map  (0) 2024.05.06
예제 -DOM2 - 하나의 tr에 td 여러개(append)  (0) 2024.05.02
'academy/JavaScript' Related Articles more