动态div工作但不显示数据

Question

有谁能告诉我这里做错了什么？在htmlStr = theName行之后的控制台日志中，我获取了在表单中输入的名称，保存在数据库中，然后查询回来。但是，我最终没有在页面中显示任何结果。我测试了div追加，它正在工作。 HTML

     <input id="allUsers" type="button" value="All users" onClick="queryDB();"> 

的Javascript

     function queryDB() {
    var sqlStr = "SELECT * FROM USERS ORDER BY id ASC";
    console.log("SQL: " + sqlStr);
    db.transaction(function(tx) {
      tx.executeSql(sqlStr, [], querySuccess, onQueryFailure);
    }, onSqlError, onSqlSuccess);
    console.log("Leaving queryDB");
  }

      function querySuccess(tx, results) {
  console.log('You are in querysuccess');
  console.log(results);
  if (results.rows.length == 0) {
    $("#showUsers").html("No data");
    return false;
  }
  var htmlStr="";
  var theID;
  var theName;
  var thePhoto;
  var len = results.rows.length;
  console.log(len);
    for(var i = 0; i < len; i++){
        theID = results.rows.item(i).id;
        console.log(theID);
        theName = results.rows.item(i).username;
            htmlStr += theName;
        console.log(theName);
        thePhoto = results.rows.item(i).imagepath;
        console.log(thePhoto);
        var userDiv = document.createElement("div");//Create the div
        userDiv.innerHTML=htmlStr;
        document.getElementById('showUsers').appendChild(userDiv);//append it to the document
        userDiv.style.display = 'block';            
    };
}