JS에서 HTML로 요소를 추가한다? 5시간을 날리는 것.

수정 버튼을 누르면 outerHTML로 기존 tr태그를 새로 만든 입력할 수 있는 tr로 바꾸고 다른 수정 버튼을 누르면 이전의 수정 tr을 원상복구하고 새로운 tr태그를 입력할 수 있는 tr로 수정하는 코드... chatGPT가 outerHTML로만 특정 행으로 tr 태그를 넣을 수 있다고 해서 5시간을 날렸는데.... 그냥 기존의 출력하는 origin과 입력하는 것으로 바꾼 insert 이 둘의 tr 요소와 index를 받아서 서로 바꿔주면 되는 것이었는데.... outerHTML은 HTML 문자열로서 삽입되다보니 node 구조가 유지되지 않아서 1 2 3 4 5 혹은 5 4 3 2 1 행 순으로 이벤트 실행은 잘 되지만 2 1 5 4 3 이런 식으로 뒤죽박죽인 순서로 실행하면 이벤트가 꼬여버리게 되는 문제가 있었다. insertBefore 메소드를 사용하면서 node 구조도 유지되고 chatGPT가 tr 요소를 가지고 와봤자 이벤트 다시 등록해야한다고 했는데 이렇게 하면 기존의 이벤트도 유지되어서 굳이 다시 또 이벤트 핸들러 등록하고 그 난리를 하지 않아도 되는 것이었다.... 너무 억울하고... 내 5시간 돌려주쇼.....

// 다른 댓글을 수정하려 할 경우 필요한 tr 내용과 해당 행의 인덱스
		let originTr;	// 문자
		let originIdx;
		let insertTr;	// 입력란
		let insertIdx;
		// 댓글 내용을 수정할 수 있는 textarea로 변경
		function editBtnClick(){
			// 이미 열려있는 Tr 태그가 있다면 원상복귀
			if(originTr !== undefined){
				commentList.insertBefore(originTr, insertTr);
				// commentList.insertRow(originIdx).outerHTML = originTr.outerHTML;
				commentList.deleteRow(insertIdx);
			}
			originTr = event.target.parentNode.parentNode;
			originIdx = Array.from(originTr.parentNode.children).indexOf(originTr);
			// 댓글 내용 변수로 저장
			const content = originTr.querySelector("td:nth-child(2)").querySelector("span").innerText;

			// 새로운 tr 요소에 수정 ui 만들어 저장하기
			// 입력하기 위한 tr 생성
			const newTr = document.createElement("tr");
			const newTd1 = document.createElement("td");
			newTd1.innerText = "댓글 수정";
			const newTd2 = document.createElement("td");
			const textArea = document.createElement("textarea");
			textArea.value = content;
			newTd2.appendChild(textArea);
			const newTd3 = document.createElement("td");
			const doEditBtn = document.createElement("button");
			doEditBtn.innerText = '수정하기';
			newTd3.appendChild(doEditBtn);
			newTr.appendChild(newTd1);
			newTr.appendChild(newTd2);
			newTr.appendChild(newTd3);

			// 기존 tr 앞에 새로운 tr 붙이고 기존 tr을 table에서 제거하기
			commentList.insertBefore(newTr, originTr);
			insertTr = newTr;
			insertIdx = Array.from(insertTr.parentNode.children).indexOf(insertTr);
			commentList.deleteRow(originIdx);
		}