jq+js获取接口数据并动态添加到页面_js从接口获取信息接入页面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40072782/article/details/108254543

本文介绍如何使用jq和js动态获取接口数据，并根据不同类型的数据动态添加不同的元素到页面上，如图片、标题及特殊图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jq+js获取接口数据并动态添加到页面
如果结构相似，但是某一部分有不同，动态添加元素：

案例：文章列表页，接口获取数据。展示效果一致图片加标题，有三种类型.
当type=special：图片左上角加专题字样，
当为video，图片加播放按钮图标，
当为article：无图标。
如下图所示：
在这里插入图片描述

 $ajax({
        url: 'httpxxxxxxx?id=' + id +' &page = ' + page
        dataType: json,
        success: function(res){
        var typeIcon = {  // 定义一个对象包含每一种类型的情况
            article: '',
            video: '<i class="play-icon"></i>',
            special: '<div class="topic-icons">专题</div>'
        } 
           for (var i = 0, len = res.length; i < len; i ++) {
               var html = '';
               html += '<li class= "li">\
                   <div class="cover">\
                    <a href="  '+ res[i].url +' "> \
	                     <img src= "+res[i].url +">\
	                     '+typeIcon[res[i]].type+'\      // 将对应元素添加到页面中
	                </a>\
                   </div>\
                   <div>\
                       <a href="  '+ res[i].url +' ">  '+ res[i].title +'  </a>\       // 属性使用变量
                   </div>\
                 </li>'
           } 
        }
    })
然后再css中添加对应样式

最终在Dom中的结构如下在这里插入图片描述