jquery mobile에서 ajax사용시 질문

<ul data-role="listview" data-split-icon="plus" data-theme="a" data-split-theme="b" data-inset="true">
    <li>
        <a href="#"><h2>Broken Bells</h2></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li>
        <a href="#"><h2>Phoenix</h2></a>
        <a href="#purchase" data-theme="a" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
</ul>

기본 ul li 에 제이쿼리 모바일 형식에 맞는 속성을 넣으면 이쁘게 ui를 바꿔줍니다 (엄청 많은 클래스명들이 추가되면서)

그런데 만약에 같은 형태의 li를 하나 더 ajax로 값을 받아서 추가하려고하면

처음과 같은 <li></li>코드를 써야하는게 아니라 그 코드안에 엄청 많은 class명들을 추가해서 ajax로 넣어주고있습니다 (밑에 예시있음)

근데 그양이 생각보다 많아서 수정시에 시간이 엄청오래걸리더라고요. 혹시 이렇게 ajax에서 class들을 추가해서 넣는것말고 다른 깔끔한 방식은없나요?

$.ajax({

url:

type: 'GET',

success: function (data) {

} else {

for (var i = 0; i < data.length; i++) {

$('#contractList').append('<li data-role="list-divider" class="ui-li-divider ui-bar-inherit ui-first-child">' + data[i].detailAddress + '</li><li class="ui-corner-all" data-icon="delete"><a href="#pageInformationContract" class="ui-btn ui-btn-icon-right ui-icon-delete deleteContract" id="' + data[i]._id + '" ><h2>' + data[i].tName + '</h2></a class"ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-b"></li>');

}

error: function (err) {

console.log(err);

}

});

}