title: How to display data to HTML using javascript
body: <p>I have a problem for displaying the data to HTML using javascript. The code that i create only display the latest data instead of the whole data. I use phonegap in my development. Here is the code:</p>
  
  <pre><code> var oldHtml = document.getElementById("favorite-table-id").innerHTML;
  
   for(var i=0; i&lt;courseIdResult.length;i++) {
      //var idResult = courseIdResult[i];
      db.transaction(
              function(tx) {
                  var query='SELECT Title,Institution_Id,FullTime,EntryScore,Prerequisites FROM Course WHERE Id='+courseIdResult[i];
                  tx.executeSql(query,[],function(tx,resultSet) {
                      console.log("Test 0");
                      var row = resultSet.rows.item(0);
                      var newHTML = "&lt;tr&gt; &lt;td&gt; &lt;table&gt; &lt;tr&gt; &lt;td width=1% style='white-space:nowrap;font-weight:bold' align='left'&gt;" +row['Title']+"-"+row['Institution_Id'] +
                        "&lt;/td&gt; &lt;td align='right' style='vertical-align:middle;' rowspan=2&gt; &lt;a href='#'&gt;&lt;span class='glyphicon glyphicon-star'&gt;&lt;/span&gt;&lt;/a&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td width=1% style='white-space:nowrap'&gt;" +
                        "Years:"+row['FullTime']+ "  ATAR:"+row['EntryScore']+ "  Prereq:"+row['Prerequisites']+ 
                        "&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt;";
                      document.getElementById("favorite-table-id").innerHTML= oldHtml + newHTML;
                  },errorCB);
              },errorCB
          );
  }
  </code></pre>
  
  <p>variable courseIdResult is an ID for my query and i am using loop to get the data. However, everytime the loop progress, the value of document.getElementById("favorite-table-id").innerHTML is always overwrite. Please help me to solve this problem.</p>
  
  <p>Thank you</p>