ajax无限滚动加载数据,无限滚动加载数据问题

做移动端程序的时候，经常会遇到无限滚动的功能，通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求，后端返回数据然后动态追加DOM，但是如果DOM结构很复杂，追加的时候拼接HTML会很复杂，比如之前做过的一段程序，如下：

$.each(response.data, function(key, task){

var html = '

';

html += '

';

html += '

';

html += '';

html += '

';

html += '

';

html += '';

html += task.user_nickname;

html += '';

html += '';

html += task.category_name

html += '';

html += '

';

html += '

';

html += task.city

html += '

';

html += '

';

html += '

';

html += ' ';

html += '

';

html += '';

html += '截止时间:' + task.deadline

html += '';

if (task.openid == openid) {

html += '';

html += '删除';

html += '';

}

if (task.is_expired == 1) {

html += '';

html += '已过期';

html += '';

}

html += '

';

html += '

';//

html += '

';

html += '

$('.task-container').append(html);

});

对于这种HTML结构封装的时候必须得非常小心，如果漏掉了某个标签，造成标签未闭合，很可能就造成整个页面样式错乱(自己都觉得这段代码太烂了)。

对于这种情况，大家有什么比较方便的方法么？