🎯 JavaScript이용하여 HTML에 list추가하는 방법 익히기
<body>
<h1 id="main-title">DOM(Document Object Model)</h1>
<ul class='website-mom'>
<li class="website">
<a class="link-google" href="http://google.com">Google</a>
</li>
</ul>
</body>HTML element를 JavaScript로 가져오기
JavaScript에서 동적으로 브라우저를 변경해주기 위해서는 가정 먼저 HTML의 tag element를 JavaScript file에 불러와야 한다.
document.querySelector();
const link = document.querySelector('.website a');
class가 website인 element의 a tag를 가져오기 위해서는 document.querySelector()를 쓰면된다.
또한 element안의 element를 가져올 때는 띄어쓰기로 구분하여 적는다.
console.log();
console.log를 통해 link를 확인해본 결과, a tag가 console에 잘 찍힌다. 즉, HTML의 a tag를 JavaScript로 잘 불러왔음을 의미한다.
JavaScript로 불러온 HTML element의 특정 attribute 값만 필요하다면?
link.getAttribute('가져오고 싶은 attribute');
console.log(link.getAttribute('href'));
getAttribute()를 사용하여 console에 출력해보면 내가 원하는 값만 받아볼 수 있는 것을 확인할 수 있다.
HTML element의 attribute를 JavaScript에서 설정해줄 수 있다.
link.setAttribute('바꿔 줄 attribute name', '바꿀 contents');
console.log(link.setAttribue('href', 'www.naver.com'));
HTML element의 class를 JavaScript에서 추가/제어 할 수 있다.
link.classList.add();
link.classList.remove();
HTML에 없던 element를 JavaScript로 만들어 줄 수 있다.
document.creatElement()
const list = document.creatElement('li')
새로 만들어 준 li tag에 contents를 추가해 완전한 element(node)를 만들어 줄 수 있다.
이 때 쓰는 property가 innerHTML
list.innerHTML = '이것은 HTML인가 JavaScript인가!';
새로운 list element를 부모 element 안에 넣어주기 위해서는 부모 element를 JavaScript로 불러와야한다.
const websiteMom = document.querySelector('.websute-mom');
불러운 부모 element 안에 자식 element인 list를 추가하는 method는 appendChild()
websiteMom.appendChild(list);
