자바스크립트로 태그에 class 클래스 추가하기 (jQuery + Vanilla js)

- class 추가하기 -

html 요소에 class를 추가하고 싶다면 어떻게 해야 할까?
특히 어떤 요소를 만들고,
그 요소에 class 값을 추가한 뒤에,
다른 요소 안에 넣어주는 작업을 할 떄가 많다.

JavaScript를 이용해서 추가한다면 다음과 같다.
다음과 같이 특정 요소를 선택하여
classList 속성에 접근하여 add() 함수를 호출한다.

cell.classList.add(className);

 

- 헷갈리기 쉬운 부분 - 

JavaScript에서 어떤 요소의 속성 값을 변경할 때 
'='로 바로 넣어줄 때가 많아서 헷갈리기 쉽다.

ele.innerHTML = 'myMsg';
ele.onchange = myFunc;

이런 식으로 속성을 바로 넣어주는 문법이 많다.

 

이와 다르게 class는 함수를 이용해서 추가해야 한다.
cell.classList.add = "cname"; //bad
위처럼 값을 바로 넣어주는 게 아니라
아래처럼 함수를 부르고 
그 함수의 매개변수로 새로운 값을 던져줘야 한다는 점에 주의하자.

cell.classList.add(className);

 

> 덧붙임1: 기억하기
Java에서도 list에 값을 추가할 때는 
add 함수를 부른다는 점을 기억하면 편하다.

물론 classList 속성도 
크롬의 개발자 모드(f12)에서 
Properties 탭을 보면 값을  간단히 확인할 수 있다.

> 덧붙임2: jQuery로 추가하기
jQuery를 쓴다면 아래처럼 쓰기도 한다.

$(cell).addClass('className'); // 클래스 추가하기
$(cell).removeClass('className'); // 클래스 삭제하기

-220404