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';            
    };
}