如何使用 jQuery 插入多个 HTML 元素

Question

我有一个网页正在从 Yahoo!天气 API。我正在使用 this query。我想使用 jQuery 构建一个 table 来插入带有 ID 的元素。这是我当前的代码：

$.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>

我的问题是：

我的做法是否正确？它有效，但它可能只是解释器的自动填充（比如省略分号）。这是正确的，如果不是，我该如何解决？感谢所有帮助。

Answer 1

目前我觉得不错。如果您的页面只会查询一次信息，那么只要它现在可以正常工作就应该没问题。如果你想允许多个查询（比如允许用户 select 一个日期并按下一个按钮来检索另一天的信息），你可能希望 empty 在 append 之前的相关元素向他们发送新项目。

如何使用 jQuery 插入多个 HTML 元素

How to insert multiple HTML elements using jQuery

html

javascript

css

jquery

yahoo-weather-api

我的问题是：