기초공사 (html,css,javascript)
과제중- replaceChild 예제 본문
//
<!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>
'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
