728x90
HTML 데이터에 JavaScript로 데이터를 반영하는 방법들
1. textContent를 사용한 텍스트 데이터 반영
- 용도: 요소의 텍스트를 설정하거나 업데이트할 때 사용합니다.
document.getElementById("title").textContent = data.title; // 게시글 제목
document.getElementById("nickname").textContent = `작성자: ${data.nickname}`; // 닉네임
2. innerHTML을 사용한 HTML 콘텐츠 반영
- 용도: HTML 태그를 포함한 콘텐츠를 삽입할 때 사용합니다.
document.getElementById("likeCount").innerHTML = `<strong>${data.likeCount}</strong> 좋아요`; // 좋아요 수
document.getElementById("content").innerHTML = data.content.replace(/\n/g, "<br>"); // 줄바꿈 처리
3. src를 사용한 이미지 데이터 반영
- 용도: 이미지 태그의 src 속성을 업데이트할 때 사용합니다.
document.getElementById("postImage").src = data.postImage; // 프로필 이미지
document.getElementById("postImage").alt = "게시글 이미지"; // 대체 텍스트 설정
4. href를 사용한 링크 데이터 반영
- 용도: 링크 태그의 URL을 업데이트할 때 사용합니다.
document.getElementById("externalLink").href = data.url; // 외부 링크
document.getElementById("externalLink").textContent = "더보기"; // 링크 텍스트
5. value를 사용한 입력 필드 데이터 반영
- 용도: <input> 또는 <textarea> 요소의 값을 설정할 때 사용합니다.
document.getElementById("usernameInput").value = data.username; // 사용자 이름 입력 필드
document.getElementById("commentTextarea").value = data.comment; // 댓글 내용
6. style 속성을 사용한 스타일 변경
- 용도: CSS 스타일을 직접 업데이트할 때 사용합니다.
document.getElementById("postImage").style.borderRadius = "10%"; // 이미지 둥글게 처리
document.getElementById("title").style.color = "blue"; // 제목 텍스트 색상 변경
7. classList를 사용한 클래스 추가/제거
- 용도: 특정 클래스 추가, 제거 또는 토글할 때 사용합니다.
document.getElementById("postEditButton").classList.add("highlight"); // 클래스 추가
document.getElementById("postEditButton").classList.remove("disabled"); // 클래스 제거
document.getElementById("postEditButton").classList.toggle("active"); // 클래스 토글
8. setAttribute와 getAttribute를 사용한 속성 제어
- 용도: HTML 요소의 속성을 동적으로 설정하거나 가져올 때 사용합니다.
document.getElementById("postImage").setAttribute("alt", "게시글 이미지"); // alt 속성 설정
const altText = document.getElementById("postImage").getAttribute("alt"); // alt 속성 가져오기
9. appendChild를 사용한 요소 추가
- 용도: 새로운 HTML 요소를 동적으로 생성하여 추가할 때 사용합니다.
const newComment = document.createElement("li");
newComment.textContent = "새로운 댓글 내용";
document.getElementById("commentList").appendChild(newComment); // 댓글 목록에 추가
10. removeChild를 사용한 요소 제거
- 용도: DOM에서 특정 요소를 제거할 때 사용합니다.
const postImage = document.getElementById("postImage");
postImage.parentNode.removeChild(postImage); // 이미지 제거
11. 반복문과 배열 데이터를 HTML에 반영
- 용도: 배열 데이터를 여러 HTML 요소에 동적으로 추가할 때 사용합니다.
const commentList = document.getElementById("commentList");
data.comments.forEach(comment => {
const commentItem = document.createElement("li");
commentItem.textContent = comment.text;
commentList.appendChild(commentItem); // 댓글 목록에 추가
});
12. 이벤트 핸들러를 통한 동적 데이터 반영
- 용도: 버튼 클릭 등 사용자 이벤트에 따라 데이터를 업데이트할 때 사용합니다.
document.getElementById("postEditButton").addEventListener("click", () => {
document.getElementById("content").textContent = "수정된 내용";
});