자바스크립트 데이터셋(data-) 메타 데이터 사용법

jQuery로 생성된 요소에 데이터셋(data-* 속성)을 추가할 때는 attr 메소드나 data 메소드를 사용할 수 있습니다.

setAttribute 메소드는 순수 JavaScript의 HTMLElement 객체에 대해 사용되는 메소드이므로, jQuery 객체에는 직접 적용할 수 없습니다. 따라서, jQuery 방식으로 코드를 수정해야 합니다.

attr 메소드를 사용하는 방법

attr 메소드를 사용하여 data-idx 속성을 설정할 수 있습니다. 이 방법은 속성을 문자열로 직접 추가할 때 유용합니다.

var tr = $("<tr></tr>");
tr.append("<td>" + "0" + "</td>");
tr.attr('data-idx', item.number); // jQuery의 attr 메소드 사용
tbody.append(tr);

data 메소드를 사용하는 방법

data 메소드를 사용하면 데이터를 key-value 쌍으로 저장할 수 있습니다. 이 메소드는 내부적으로 데이터를 처리하지만, HTML 마크업에는 data-* 속성으로 반영됩니다.

var tr = $("<tr></tr>");
tr.append("<td>" + "0" + "</td>");
tr.data('idx', item.number); // jQuery의 data 메소드 사용
tbody.append(tr);

data 메소드는 특히 다루려는 데이터가 자주 변경되거나 JavaScript에서 더 많이 사용될 때 유용합니다. 반면, attr 메소드는 HTML 마크업에 명시적으로 데이터를 보여줄 필요가 있을 때 적합할 수 있습니다.

두 방법 모두 jQuery 객체에 데이터를 추가하는 효과적인 방법이므로, 상황에 맞게 선택해서 사용하시면 됩니다.