将API中的数据插入DOM
将API中的数据插入DOM
提问于 2016-03-30 09:12:53
我从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);
});
我试过了，但是它不工作吗？为什么？
回答 2
Stack Overflow用户
发布于 2016-03-30 10:58:02
那么，只需将一个容器添加到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);如果我没弄错你的问题，仅此而已。
Stack Overflow用户
发布于 2016-03-30 11:11:39
如果您希望这些数据出现在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);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36304391
复制相关文章
相似问题
显示项目符号的AutoComplete列表
表格单元格内的项目符号列表
显示以项目符号居中的列表
jQTouch列表项目符号不显示
在物化列表中显示项目符号
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
