웹소켓으로 만들어진 요소들의 이벤트 기능 구현을 위해서는
자바스크립트로 HTML요소들을 전부 새로 만들어야 했다.
예를들어 todolist를 웹소켓으로 만들면 그 todolist수정,삭제와 그 안에 들어갈 todo 생성,수정,삭제 등의 요소들과 기능을 자바스크립트로 다시 구현해야했다.
아래는 todolist 수정을 createElement를 사용해서 만든 코드이다.
//todolist 수정
let todolistmod = document.createElement("button");//버튼생성
todolistmod.id = "todolistmod"+res.msg.tlIdx;//버튼 id 등록
todolistmod.className = "todolistmod";//버튼 클래스 등록
todolistmod.dataset.tlidx = res.msg.tlIdx;//버튼 dataset 등록(th:attr data-tlidx = res.msg.tlIdx)
todolistmod.innerHTML= "todolist 제목 수정";//버튼 이름
document.querySelector('#date'+res.msg.tlIdx).appendChild(todolistmod);//해당 버튼을 'date'+res.msg.tlIdx ID를 가진 요소의 자식요소로 설정
todolistmod.addEventListener('click', ev => {//버튼을 눌렀을때 이벤트
let tlIdx = ev.target.dataset.tlidx;
console.log('tlIdx: '+tlIdx);
let todolistIdx = tlIdx;
let todolistTitle = document.getElementById('tltitle'+tlIdx).value;//'tltitle'+tlIdx ID를 가진 요소의 value값
console.log('todolistIdx: '+todolistIdx);
console.log('todolistTitle: '+todolistTitle);
stompClient.send("/app/modify-todolist/" + [[${planner.tpIdx}]], {}, JSON.stringify({'title':todolistTitle, 'tlIdx':todolistIdx}));
});
JavaScript
복사
자바스크립트로 HTML 요소 작성 예시