本地访问json，动态添加div，动态添加子元素

最新推荐文章于 2021-07-03 15:11:10 发布
最新推荐文章于 2021-07-03 15:11:10 发布
阅读量377 收藏
点赞数
分类专栏： css js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/song_within_cloud/article/details/106786937
版权

精简版代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>

<body>
    <div id="testDiv">
    </div>
    <script>
        //回调函数
        function test(res) {
            let data = res.data;

            for (let i = 0; i < data.length; i++) {
                //创建 item div 
                $("#testDiv").append("<div class=\"item\"></div>");

                //创建 p 结点
                let pNode = document.createElement("p");
                let textNode = document.createTextNode(data[i].title);
                //将标题添加进 p 结点   
                pNode.appendChild(textNode);
                //将标题放入item 
                $("
最低0.47元/天 解锁文章
song_within_cloud
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
读取json数据动态生成table
05-25
用js加载json数据，然后用table显示。
Ajax+JSON动态显示某个div的内容
07-29
有很多童鞋觉得Ajax难，觉得弹出层难，觉得动态在某个层显示数据难，其实并非是难，而是你没有接触到这些技术，当你真正的使用过之后才发现原来不过尔尔。 好了闲话不多说，为了更好的说明问题，我写了一个简单的项目（这个功能是为朋友写的，所以名字未改，童鞋们下载后就知道了）。 项目的功能如下：点击前台的某个链接或者按钮，动态的在某个div层上显示从数据库中查询的内容（这个div可以是浮动层，我为了简单就没做浮动处理了），在项目中数据没有从数据库获取，只是根据前台Ajax请求传递的参数，动态的生成了一些内容。 项目简单，就没有做过多详细的注释，有说明不懂的地方或问题，可以随时联系我 QQ：346282626（公司不能用qq，只有晚上在家用） 所以有问题的话可以发邮件咯
（.net）ajax+json+catch缓存+js控制页面动态生成div
张家小丫头的博客
02-29 1045
本文实现的功能是：         （.net）ajax+json+catch缓存+js控制页面动态生成div
Json数据节点添加子节点
好巧~我看到你了
07-30 6106
var jsonstr="[{'name':'a','value':1},{'name':'b','value':2}]"; var jsonarray = eval('('+jsonstr+')');//eval()方法转换json对象 var arr = { "name" : $('#names').val(), "value" : $('...
json有div标签html不显示,使用.html（）不显示JSON数据（）
weixin_30239869的博客
06-10 189
在发布这个问题之前，我在这里搜索并得到了不同的答案，我认为它不符合我的需要。我有一个按钮，点击后，下面的JS脚本运行使用.html()不显示JSON数据()$("#update-details-btn").on('click', function() {$.ajax({type: 'post',dataType: 'json',data: "confirmation="+get_data,url:...
JavaScript数组，JSON对象实现动态添加、修改、删除功能示例
10-18
主要介绍了JavaScript数组，JSON对象实现动态添加、修改、删除功能,结合实例形式分析了JavaScript针对json数组的添加、删除、修改操作实现技巧,需要的朋友可以参考下
JavaScript中动态向表格添加数据
10-20
3. **动态添加元素**： 使用`document.createElement()`方法可以创建新的HTML元素。例如，创建新的`<tr>`、`<td>`或`<input>`元素。`innerHTML`属性用于设置或获取元素内部的HTML内容。 4. **遍历数组和操作DOM**...
JS获取动态添加元素的方法详解
12-01
在JavaScript编程中，动态添加元素是一项常见的需求，特别是在构建交互丰富的网页应用时。本文将详细介绍三种获取这些动态添加DOM元素的方法。 ### 1. 模板引擎中添加行内事件 模板引擎允许我们在HTML模板中嵌入...
javaScript 动态访问JSon元素示例代码
10-26
访问JSon元素的方法有很多，在搜的时候会找到很多，本文使用javascript来动态访问json元素，感兴趣的朋友可以练练手哦
html支持jinja2,动态创建html div jinja2和ajax
weixin_39952190的博客
06-28 221
所以我有一个scroll函数，当它到达页面底部时发送一个ajax请求，ajax函数用JSON检索一些数据，我想把这些数据填充到一个div中，有没有可能使用jinja2来完成这个任务？现在我只是在玩，用js创建一个div(不是我想要的那个)。在$(document).ready(function() {var start = $(".boxybox").length;var stop = start...
JSON数组遍历-在到div显示出内容
WEB前端--彭亚平
03-20 4918
html代码 &lt;div id="myId"&gt;&lt;/div&gt; &lt;div id="myDay"&gt;&lt;/div&gt; var bb = [ {"years":"2016","day":"aaa"}, {"years":"2017&q
javascript中JSON数据动态展示div循环列表
zhaoxiaoweiCSDN的博客
05-23 963
javascript中JSON数据动态展示div循环列表技术模块:javascript,Vue,v-for指令效果展示:![](https://img-blog.csdnimg.cn/20200523141432963.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW94aWFvd2VpQ1NETg==,size_16,color_FFFFF
Jquery 格式化Json 并且显示在div
比嗨皮兔
06-22 1514
jquery格式化显示json文本，具体的代码： var formatJson = function (v, options) { var reg = /(\[|{|,)/g; v = v.replace(reg, function (a, b) { return a + ""; }); reg =
从JSON中读取数据追加到HTML中
weixin_33850015的博客
11-29 2684
在写内容逻辑重复性的页面时，用json数据可以显著提高编程效率，并且便于后期的数据维护。因此，在视频专题页面，需要展示多列视频数据，我选择了用json。 HTML如下（只展示重点部分，需要引用JQ） <div class="container-fluid content "> <div class="co...
JSON数据格式化显示
bangbDIV的博客
06-19 1388
涉及知识点: 使用pre标签 + JSON.stringify的第三个参数 <pre> </pre> <script> let a = {b: 1,c: 2} document.getElementsByTagName("pre")[0].innerHTML = JSON.stringify(a, null, 2); </s...
js里将json显示在div里并高亮关键字
niuge8905的博客
06-24 1169
_syntaxHeightlight(json) { if (typeof json !== "string") { json = JSON.stringify(json, undefined, 2) } json = json.replace(/&/g, '&').replace(/</g, ...
js获取php json,通过JS获取JSON数据并加载的步骤详解
weixin_30938297的博客
03-10 644
这次给大家带来通过JS获取JSON数据并加载的步骤详解，通过JS获取JSON数据并加载的注意事项有哪些，下面就是实战案例，一起来看一下。通过JS获取JSON数据并加载的步骤详解在写内容逻辑重复性的页面时，用json数据可以显著提高编程效率，并且便于后期的数据维护。因此，在视频专题页面，需要展示多列视频数据，我选择了用json。HTML如下(只展示重点部分，需要引用JQ)热门视频JS如下$(docu...
json div html,如何将json数组设置为html格式div？
weixin_42563415的博客
07-03 182
我与同这一问题的代码的工作，我可以获取和设置我的检索阵列 分开，但我不能对它进行设置以HTML格式。在这里，我把我的代码与HTML.This代码与页面加载工作。 window.onload function(){};。 任何帮助欣赏。var j=0;var k=0;if($.trim(passid) != 0){$.post('retrivedata.php', { passid: passid}...
动态添加新的json数组元素
最新发布
05-27
要动态添加新的 JSON 数组元素，可以使用以下步骤： 1. 首先，将 JSON 数组字符串解析为一个可操作的 JavaScript 对象。可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。 2. 在 JavaScript 对象中，找到要添加到的 JSON 数组。可以使用数组索引或数组方法（如 push()）来访问和操作数组。 3. 创建一个新的 JSON 对象，将其添加到数组中。可以使用 JavaScript 对象字面量语法创建 JSON 对象。 4. 最后，将 JavaScript 对象转换回 JSON 字符串。可以使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。 下面是一个示例代码，演示如何动态添加新的 JSON 数组元素： ``` // 假设 jsonStr 是包含 JSON 数组的字符串 var jsonObj = JSON.parse(jsonStr); // 获取要添加到的 JSON 数组，假设它的名称是 myArray var myArray = jsonObj.myArray; // 创建一个新的 JSON 对象 var newObject = { "name": "John", "age": 30, "city": "New York" }; // 添加新的 JSON 对象到数组中 myArray.push(newObject); // 将 JavaScript 对象转换回 JSON 字符串 var newJsonStr = JSON.stringify(jsonObj); ``` 在这个例子中，我们假设 JSON 字符串包含一个名为 myArray 的数组。我们首先将 JSON 字符串解析为 JavaScript 对象，然后获取 myArray 数组。然后，我们创建一个新的 JSON 对象并将其添加到 myArray 数组中。最后，我们将 JavaScript 对象转换回 JSON 字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值