동적으로 태그추가시

웹 프로그래밍을 하다보면 동적으로 태그를 추가 시키는 경우가 있다

<script>

var tag = "<input type='text' id='test' name='test' />";

$("#testTable").append(tag);

</script>

가령 이런식으로 태그를 추가하는것인데 평소에 종종 사용해오다가 이번에 추가되는 input 태그에 각각 datepicker를 지정하는 것을 하게되었다.

처음에 사용한 방법은 기존 방법과 똑같이 하는것이었는데 그러다보니 추가되는 태그마다 고유속성인 id가 똑같게 지정되고, 그러다보니 제일 처음 생성된 태그에만 datepicker 속성이 지정되고 2번째 생성태그부터는 지정이 안되는 현상이 발생했다.

그래서 getElementsByName()이나 $("[name='test']") 이런 방법, 혹은 생성태그에 class속성을 지정해서 그것을 불러와서 사용하는 법을 검색으로 찾아냈고 적용해봤는데

연속된 태그 모두 datepicker 속성이 적용되긴했으나 달력에서 날짜를 선택하면 제일 처음 생성된 태그의 값이 바뀌는 현상이 발생했다.

2번째 생성된 datepicker에서 날짜를 바꿔도 첫번째 생성된 태그에 적용이 되는 현상이었다.

여기저기 질문글도 올려보고 검색해봤는데 이상하게 도저히 답이 나오지않았다.

그래서 중복되는 id의 문제인것같아 반복문으로 생성될때마다 id값을 다르게 주기위해선 어떻게 해야하는지 생각해봤다.

그런데 생각보다 매우 쉬운 해결책이있었다. 아예 id속성을 안주는것이었다.

id속성을 지정하지않으면 위에서 말한 방법중 제일 첫번째방법 말고는 어떤 방법을 사용해도 된다.

이런간단한거에 오후시간 내내를 투자하다니..