javascript - 动态 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';            
    };
}