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>
