开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >将API中的数据插入DOM

问将API中的数据插入DOM
EN

Stack Overflow用户

提问于 2016-03-30 09:12:53

回答 2查看 528关注 0票数 0

我从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);
});

我试过了，但是它不工作吗？为什么？

EN

回答 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);

如果我没弄错你的问题，仅此而已。

票数 1

EN

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);

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36304391

复制

相关文章

HTML5中的DOM扩展（三）插入标记

html5 dom innerhtml input script

今天我们说一下插入标记，我们熟悉的插入有innerHTML，其实还有几种和他类似的方法，我们展开说一下。

大熊G

2022/11/14

2K0

HTML5中的DOM扩展（三）插入标记

DOM扩展Selectors API

api css 编程算法

Selectors API是基于css选择器获取DOM的匹配模式，我们很早之前用的jQuery就有按照css选择器查询DOM元素获取引用。Selectors API有三种常用的方法就是querySelector(),querySelectorAll(),matches()。

大熊G

2022/11/14

3180

DOM扩展Selectors API

oracle insert 将一张表数据插入另外表中[通俗易懂]

sql java https 网络安全

insert into tableA (name,age) select b.studentname, b.age from tableB b where b.id>30

全栈程序员站长

2022/09/09

2.2K0

mysql将大数据插入表中方法

云数据库 SQL Server 大数据 sql

1 数据量不是很大,有几千行数据.先用notepad对数据进行编辑,结果如下 insert into `web4399_vote`.`frxz2_hlwjhj_code` (active_code) values('s001asdf87mo'), ('s001sfsdfy5e'), ('dfsdfc3euv'), ('s0sdfsd6k4j6z'), ('s00dfsdfk59'), (asdfnth'), ('s00asdf246l'), ('s001sdfsdf1h'); 然后,

闵开慧

2018/03/30

1.8K0

用MapReduce分析Hbase将结果插入mysql中

mapreduce hbase 云数据库 SQL Server

从HBASE读取清洗过的数据，写入到mysql的表中 NewInstallUserRunner.java 计算新增用户入口类 NewInstallUserRunner的所有属性方法 main方法：

Albert陈凯

2018/04/04

1.6K0

用MapReduce分析Hbase将结果插入mysql中

详解「react-dom」 API

react jquery ui 网站渲染 api

从Vue转到React差不多快三个月，这两种框架其实在设计哲学上完全是不一样的道路但是同时又那么相似。

19组清风

2021/11/15

8970

详解「react-dom」 API

DOM常用外部插入方法与区别

节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容。

小周sir

2019/09/23

6750

Scrapy中如何提高数据的插入速度

scrapy 分布式爬虫

速度问题最近工作中遇到这么一个问题，全站抓取时采用分布式：爬虫A与爬虫B，爬虫A给爬虫B喂饼，爬虫B由于各种原因运行的比较慢，达不到预期效果，所以必须对爬虫B进行优化。提升Scrapy运行速度有很多方法，国外有大佬说过 Speed up web scraper Here's a collection of things to try: use latest scrapy version (if not using already) check if non-standard middlewares a

小歪

2018/04/04

2.5K0

Scrapy中如何提高数据的插入速度

python在sqlite中插入数据

sqlite android 数据库 sql

python通过引入sqlite的包，就能够直接操作sqlite数据库 import sqlite3 import math cx=sqlite3.connect("mydatabase.sqli

py3study

2020/01/06

4.1K0

不容忽视的 8 个 DOM API

api dom 动画函数事件

文档对象模型（DOM）提供了许多强大的功能，在现代浏览器中无需外部依赖即可使用。在本文中，我们将探讨8个可能被忽视的DOM功能

前端小智@大迁世界

2023/08/16

3560

将XML文档表示为DOM

%XML.Document类和%XML.Node类使可以将任意XML文档表示为DOM(文档对象模型)。然后，可以导航此对象并对其进行修改。还可以创建一个新的DOM并将其添加到其中。

用户7741497

2022/07/05

5110

jQuery中的DOM操作

该文介绍了DOM操作的分类，包括查找节点、创建节点、插入节点、删除节点、替换节点、包裹节点、复制节点、替换节点和节点互换。使用DOM操作可以更加方便地操作HTML和CSS，实现各种动态效果和交互功能。

IMWeb前端团队

2017/12/29

1.5K0

jQuery中的DOM操作

查找属性节点（通过jq选择器），操作属性节点（attr（‘属性名’,’属性值’）），操作文本节点（text（））读/写

IMWeb前端团队

2019/12/03

1.3K0

浅谈DOM中的类型

html xml node.js

node类型是DOMLevel 1中定义的，除了ie浏览器所有的浏览器都可以访问这个类型，在js中，所有的节点类型都继承node类型。

大熊G

2022/11/14

4610

Vue中的DOM操作

1、在要获取的标签中添加 ref="xx" 示例： <button ref="btn">一个按钮</button> 2、在 mounted 钩子中使用 this.$refs.xx. 获取并操作 DOM 元素示例： mounted() { this.$refs.btn.style.backgroundColor="red" } 3、vue 操作 DOM 完整示例： template 部分： <template> <div> <button ref="btn">一个按钮</button>

Leophen

2019/08/23

1.3K0

vue中的虚拟dom

渲染 dom 对象数据性能

DOM操作是Web开发中非常昂贵和低效的操作，尤其是在用户界面频繁更新的情况下。此时，在每次数据更新时重新渲染整个DOM树会导致应用程序性能下降。

九仞山

2023/10/14

1980

react中的虚拟DOM

6. 新的DOM（实际上就是DocumentFragment），和原始的DOM做比对，找差异

EchoROne

2022/08/15

8080

MySQL 中Blob类型数据的插入和读取

我们在操作数据存入blob数据的类型,常用来存储头像图片等流数据,blob类型如果想要存储比较大的流文件的数据,建议选用longBlob的数据类型,Demo中的数据就简单的示范了一下,sql文件如下:

Dream城堡

2019/05/24

9.8K0

点击加载更多

相似问题

将Api中的数据附加到Dom

19

将内容插入DOM中

56

无法将heroku api中的数据显示到Dom

23

AngularJS -获取插入dom中的数据

15

用javascript将数据插入到预制的dom元素中

55

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

💥开发者 MCP广场重磅上线！

精选全网热门MCP server，让你的AI更好用 🚀