JS에서 동적으로 생성한 태그에 클래스 만들어주기!

  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const span = document.createElement("span");

 

클론 코딩한 ToDo리스트를 CSS로 다듬던 중 리스트나 버튼, span에 클래스 이름이 없어서

css로 꾸밀 수 없는 곤란한 상황이 발생했고 !

 

검색결과 

.setAttribute를 발견!

 

 

  li.setAttribute("class", "toDoList");
  delBtn.setAttribute("class", "myBtn");
  span.setAttribute("class", "toDoContent");

 

리스트, 버튼, 스팬에 각각 클래스를 만들어 줄 수 있었고!!!!!

 

 

inspect를 해보니 실제로 class 이름들이 생겼다 !

이 class 이름을 이용해서 css에서 정렬, 크기, 색깔 등등등 정리!