附加数据时出现Jquery XSS问题

Question

我现在遇到一个问题就像当我使用jquery将一些数据附加到HTML时，内容被删除并且XSS被附加到正文中，

当我像这样添加

时，实际上得到了输出

function init() {
    var data = TABLE_DATA;
    for(var i = 0; i< data.length; i++){
        var tablerow = jQuery('<tr></tr>');

        var tableTD = jQuery('<td></td>');
        tableTD.text(data[i].id);
        var tableTD1 = jQuery('<td></td>');
        tableTD1.text(data[i].name);
        var tableTD2 = jQuery('<td></td>');
        tableTD2.text(data[i].thumbnailUrl);
        var tableTD3 = jQuery('<td></td>');
        tableTD3.text(data[i].price);   
        tablerow.append(tableTD,tableTD1,tableTD2,tableTD3);
        $('.content').append(tablerow)
    }
}

数据将是一个json，输出成功附加到表

但是当我这样做时，我将XSS附加到主体上，删除所有附加的Jquery标签，

function init() {
    var data = TABLE_DATA;
    for(var i = 0; i< data.length; i++){
        var tablerow = jQuery('<tr></tr>')
        tablerow.append('<td>' + data[i].id+'</td>')
        tablerow.append('<td>' + data[i].name+'</td>')
        tablerow.append('<td>' + data[i].thumbnailUrl+'</td>')
        tablerow.append('<td>' + data[i].price+'</td>')
        $('.contents').append(tablerow)
    }
}

实际上为什么会发生这种情况，对此有何解决方法。必须对代码进行哪些更改。

提前致谢。