12월 3일 복기
오늘은 HA4를 할거야 하... DOM에 너무 많은 시간을 투자하는 것 같다.
<html>
<body>
<ul id="container"></ul>
</body>
<html>
<ul id="container">
<li>
<a class="name">Joe Blow</a>
<div class="age">42</div>
</li>
<li>
<a class="name">Mary Jenkins</a>
<div class="age">36</div>
</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap" rel="stylesheet">
</head>
<body>
<h1>
test4 Playground
</h1>
<h4>
'Potter Harry' 를 누르면 'student' 가 콘솔에 찍혀야 합니다.
</h4>
<h4>
'Dumbledore Albue' 를 누르면 'principal' 이 콘솔에 찍혀야 합니다
</h4>
<h5>
'peopleList' 변수를 이용해서 test4에서 코드를 작성해 봅니다
</h5>
<ul id="container">
<li class="undefined"><a class="name">Potter Harry</a>
<div class="age">15</div>
</li>
<li class="undefined"><a class="name">Dumbledore Albus</a>
<div class="age">92</div>
</li>
</ul>
<h5>
ul 태그의 id인 'container'는 변경하지 않습니다
</h5>
</body>
</html>
여기에다가 만들건데 먼저
콘텐츠를 만들어야겠죠?
let liElement =document.createElement('li')
let aElement = document.createElement('a')
let divElement = document.createElement('div')
<ul id="container">에 붙여줘야겠죠?
가져옵니다.
let ul= document.getElementById('ul')을 해줘도 되고
let ulElement = document.querySelector('#container') 를 해줘도 됩니다.
let fragment = document.createDocumentFragment();
도큐먼트에 붙여줄 요소를 가져옵니다.
근데 위에는 <li>에 classList가 없으니까 제거를 해줍니다.
liElement.classList.remove()
liElement.appendChild(aElement)
liElement.appendCHild(divElement)
임지택입니다.