Javascript:요소 내용 변경

틀:Javascript

1. Javascript:개요
2. Javascript:변수, 상수
   1. Javascript:자료구조
3. Javascript:연산자
4. 분기문
   1. Javascript:조건문
   2. Javascript:반복문
5. Javascript:선택자
   1. Javascript:요소 내용 변경
   2. Javascript:HTML로부터 데이터 받기
6. Javascript:이벤트
   1. Javascript:클릭 이벤트
7. Javascript:AJAX
   1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
8. Javascript:활용
   1. Javascript:표 정렬

개요

선택한 요소의 내용을 변경하는 방법.

방법

클래스 관련

의도	설명	방법
클래스명 변경	클래스 이름을 지정한다.	객체.className = '이름';
클래스 추가	기존에 추가	객체.className += ' 이름'; // 스페이스도 추가해 주어야 한다. 객체.classList.add('이름'); // 스페이스 필요없음.
클래스 내용 변경	기존 내용을 변경한다. 클래스 요소 중 해당 내용만 변경한다.	객체.classList.replace('변경전이름', '변경할이름'); 객체.classList.remove('삭제할이름', ...);
클래스 객체	해당 객체 자체에서 클래스를 지운다.	객체.classList.remove();

태그 내부 관련

의도	설명	방법
태그 내부의 내용 변경		객체.innerHTML = '변경할 내용';

HTML 태그 속성 변경

이상하게 객체를 $('선택자') 형태로 지정하면 작동하지 않는다.

document.getElementById('찾을객체').setAttribute('바꿀 속성', '바꿀값'); 이런 식으로 선택해주어야 제대로 작동한다.