How to insert multiple HTML elements using jQuery

I have a webpage that is taking data from the Yahoo! Weather API. I am using this query. I would like to build a table using jQuery that inserts elements with IDs. Here is my current code:

$.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22canberra%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function(data) {
  $("#title").append(data.query.results.channel.title);
  $("#sunrise").append(data.query.results.channel.astronomy.sunrise);
  $("#sunset").append(data.query.results.channel.astronomy.sunset);
  $("#title-2").append(data.query.results.channel.item.title);
  for (var i = 0; i < 10; i += 1) {
    var newRow = $("<tr></tr>").attr("id", "row-" + (i + 1));
    var newDate = $("<td></td>").attr("id", "date-" + (i + 1));
    var newMin = $("<td></td>").attr("id", "min-" + (i + 1));
    var newMax = $("<td></td>").attr("id", "max-" + (i + 1));
    var newConditions = $("<td></td>").attr("id", "conditions-" + (i + 1));
    $("#weather").append(newRow);
    $("#row-" + (i + 1)).append(newDate, newMin, newMax, newConditions);
    $("#date-" + (i + 1)).append(data.query.results.channel.item.forecast[i].day + " " + data.query.results.channel.item.forecast[i].date);
    $("#min-" + (i + 1)).append((Math.floor(((data.query.results.channel.item.forecast[i].low) - 32) / 1.8)) + "°C");
    $("#max-" + (i + 1)).append((Math.floor(((data.query.results.channel.item.forecast[i].high) - 32) / 1.8)) + "°C");
    $("#conditions-" + (i + 1)).append(data.query.results.channel.item.forecast[i].text);
  }
  $("#lastBuild").append(data.query.results.channel.lastBuildDate);
}, "json");

div#main {
  width: 595px;
}
table#weather {
  border-collapse: collapse;
  width: 595px;
}
table#headers {
  width: 595px;
}
td,
th {
  width: 148.75px;
  text-align: center;
}
tr {
  height: 28px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id="main">
  <h1 id="title"></h1>
  <ul id="sun">
    <li id="sunrise"><strong>Sunrise: </strong></li>
    <li id="sunset"><strong>Sunset: </strong></li>
  </ul>
  <h2 id="title-2"></h2>
  <table id="headers">
    <tr>
      <th id="date">Date</th>
      <th id="min">Min</th>
      <th id="max">Max</th>
      <th id="conditions">Conditions</th>
    </tr>
  </table>
  <table id="weather" border="1"></table>
  <br />
</div>
<em id="lastBuild">Data last built at: </em>

My question is this:

Am I going about the correct way of doing this? It works, but it might just be an autofill by the interpreter (like leaving off semicolons). Is this right, and if not, how can I fix it? All help appreciated.

Solution

Currently it looks good to me. If your page will only ever query the information once, then it should be fine as long as it is working now. If you want to allow multiple queries (like allowing the user to select a date and press a button to retrieve information of another day), you might want to empty the relevant elements before appending new items to them.