如何在 thymeleaf 和 javascript 代碼中轉義單引號

Question

我需要使用 javascript 更新 html DOM，方法是插入一個鏈接，當用戶單擊 Thymeleaf 模板中的鏈接時，該鏈接將調用 javascript 函數。

$.ajax({
  type: "GET",
  beforeSend: function(xhrObj){
    xhrObj.setRequestHeader("Content-Type","application/json");
    xhrObj.setRequestHeader("Accept","application/json");
  },
  url: "/users/list",
  dataType:"json",
  success: function( data,  textStatus,  jqXHR){
        var table = $("#userlist").children();
        for(i in data){
            table.append("<tr><td><a onclick='user_see("+data[i].userId+")' th:href='#'>"+data[i].userId+"</a></td><td>"+data[i].firstName+"</td><td>"+data[i].lastName+"
            }
   }
});

事實證明，Thymeleaf 用雙引號替換了單引號。 我試過用 \\' 轉義單引號，但我只在頁面加載時出現 Thymeleaf 解析錯誤

2014 年 10 月 30 日星期四 17:55:21 發生意外錯誤（類型 = 內部服務器錯誤，狀態 = 500）。 異常解析文檔：template="users/list",

我怎樣才能逃避單引號？

Answer 1

最安全的做法不是將 HTML 作為字符串附加，而是使用 DOM API。 它更冗長，但避免了引用問題：

 data.forEach(function(datum) {
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var a = document.createElement('a');
    a.onclick = function() { user_see(datum.userId); };
    a.setAttribute('th:href', '#');
    a.innerHTML = datum.userId;
    tr.appendChild(td);
    td = document.createElement('td');
    td.innerHTML = datum.firstName;
    tr.appendChild(td);
    td = document.createElement('td');
    td.innerHTML = datum.lastName;
    tr.appendChild(td);
    table.appendChild(tr);
}