프론트엔드 TIL - JavaScript DOM 조작
태그 안에 새로운 HTML 태그 추가하기
회사 홈페이지에 언론 보도 컨텐츠를 더 추가해달라는 요청을 받았다.
한두개라면야, 기존에 하드코딩 되어있던걸 복붙하면 끝났을 것이다.
그러나 그렇게 추가 될 뉴스가 20개가 넘었고,
향후 주기적으로 업데이트가 될 예정이라고 했다.
정적인 페이지라,
그냥 news data를 js파일로 만들어서
데이터에 따라 컨텐츠 갯수나 내용이 변하게 동적으로 만들었다.
추후 요청사항에 따라 data를 변경하긴 해야하지만
하나하나 복붙하는 것보다 효율적이라고 생각한다.
JavaScript로 DOM 조작하기
아래에 나타난 document의 기본 메소드를 통해 조작할 수 있다.
CREATE(생성): createElement
READ(접근): querySelector, querySelectorAll, getElementById, getElementByClassName
UPDATE(추가): textContent, setAttribute 등
DELETE(제거): remove, removeChild, innerHTML="", textContent=""
cf) APPEND: appendChild
1. 타겟 태그 선택하여 가져오기.
나는 card-list라는 클래스를 가진 태그를 가져왔다.
그리고 이 태그 안에 카드 뉴스 ui를 와다다 추가해줄 예정이다.
const newsListDiv = document.getElementsByClassName('card-list')
2. 카드 뉴스 UI 구조에 뉴스 데이터 넣어주기
-> DOM 구조에 붙이기
반복문을 사용해서 news 데이터를 썸네일과 보도날짜, 언론사 이름을 가진 카드 뉴스 형태로 만들어준다.
그리고 타겟 태그의 자식태그로 추가해주면 된다.
for(let i = 0; i < sortedNews.length; i++){
const card = `
<article>
<a href="/" target="_blank">
<img src="src" alt="사진">
<h3>제목</h3>
<span>언론사/보도날짜</span>
</a>
</article>
`
newsListDiv[0].insertAdjacentHTML("afterbegin", card);
}
insertAdjacentHTML ?
insertAdjacentHTML() 메서드는 두개의 인자를 받는데,
첫번쨰 인자는 노드가 지정될 위치이고 두번째 인자는 HTML 형태의 문자열이다.
(position 에 들어갈 값은 참고 링크에서 확인하면 된다. )
지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입한다.
innerHTML과 차이라고하면,
해당 메소드는 기존의 DOM트리를 건드리지 않고 내가 추가한 값을 내가 원하는 위치에 넣을 수 있다.
(innerHTML은 기존 값을 삭제하고 내가 수정한 값으 덮어쓰기함)
참고 ) https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML
