将API中的数据插入到DOM中

Insert data from API into DOM

本文关键字：DOM 插入 API 数据      更新时间：2023-10-07

我从API检索数据，并希望在引导程序布局中获取数据。

$.ajax({
  url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>'
}).done(function(data) {
  console.log(data);
  var html = "";
  $.each(data.results, function(index, item) {
    html += "<div class='row'>";
    html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
    html += "<span class='item-description'>" + item.description + "</span>";
    html += "</div>";
  });
  setTimeout(function() {
    $(".container").append(html);
  }, 1500);
});

我试过了，但不起作用？为什么？

好吧，只需在应该添加标记的DOM中添加一个容器。

<div class="js-table-container"></div>

然后将html添加到此容器

var html = "";
$.each(data.results, function(index, item) {
html += "<div class='row'>";
html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
html += "<span class='item-description'>" + item.description + "</span>";
html += "</div>";
});
$('.js-table-container').html(html);

如果我对你的问题理解正确的话，仅此而已。

如果在Dom中的一个元素之后或之前有什么数据，请使用jquery insertAfter或insertBefore。为什么使用超时功能？您可以在处理后直接添加到Dom。

>     $.ajax({
>       url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>'
>     }).done(function(data) {
>       console.log(data);
>     
>       var html = "";
>       $.each(data.results, function(index, item) {
>         html += "<div class='row'>";
>         html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
>         html += "<span class='item-description'>" + item.description + "</span>";
>         html += "</div>";
>       });
>     // if you want to load all data inside this container use html
>         $(".container").html(html);
>     // if you want to load after this
>      $(".container").insertAfter(html);
>     // if you want before this
>      $(".container").insertBefore(html);

相关文章：