[HTML / Javascript] 동적으로 id 부여

<c:forEach items="${todo}" var="item">
	<div class=item id="notSet">
    	내용
	</div>
	<script>document.querySelector('#notSet').id="${item.id}"</script>	
</c:forEach>

 

1. 아이템이 몇 개 들어갈지 모르기 때문에 동적으로 id를 부여해야 함

 

2. querySelector()는 DOM의 맨 첫번째 selector를 찾기 때문에 default값으로 notSet id 부여해놓음

그리고나서, notSet -> ${item.id}로 변경하면 다음에 수행되는 querySelector()는 아직 수정되지 않은 id중 맨 위의 노드를 찾게 됨