javascript|记录一次使用原生js开发的日常jq生成列表

承认入门就从vue开始学的前端,
到了原生与jq,我真滴是,感觉寸步难行。
记录两个这次做小dome的心得。
1、jq动态的生成html代码。

不会使用jq模板的情况下直接操作dom原生生成循环的代码片段。

首先后台数据:
`var response = {
"info": "鉴定结束", "errcode": 200, "result": [ { "category": { "res": "n", "rate": 0.9760529398918152 }, "name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00001.jpg", "time": 0 }, { "category": { "res": "n", "rate": 0.6681641340255737 }, "name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00003.jpg", "time": 2 }, { "category": { "res": "s", "rate": 0.5017970204353333 }, "name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00005.jpg", "time": 4 }, { "category": { "res": "n", "rate": 0.8622422814369202 }, "name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00007.jpg", "time": 6 }, { "category": { "res": "n", "rate": 0.9994558691978455 }, "name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00009.jpg", "time": 8 }, { "category": { "res": "n", "rate": 0.7771035432815552 }, "name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00011.jpg", "time": 10 }, { "category": { "res": "n", "rate": 0.45609694719314575 }, "name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00013.jpg", "time": 12 } ] }; `

【javascript|记录一次使用原生js开发的日常jq生成列表】相对来说这算正常的简单数据了吧,
然后 开始创建基本模板
` var videoResult = [];
videoResult.push('
    '); resArr.forEach((item,index) => { var resultImg = 'http://identify.neargh.com:7019'+ item.name; var rate = item.category.rate.toString().substr(2,2) + '%'; var resDataType = item.category.res; var resType = ''; switch (resDataType) { case 'n': resType = '正常'; break; case 'p': resType ='色情'; break; case 's': resType ='性感'; break; case 't': resType ='暴恐'; break; case 'news': resType ='新闻'; break; default: resType = '未知类型'; }videoResult.push( '
  • ' + '' + '识别结果:' + rate+ resType + '' + '' + '出现时间:' + item.time + '秒' + '' + "javascript|记录一次使用原生js开发的日常jq生成列表" + '
  • ' ) }) videoResult.push('
'); $('#resultText').html(videoResult)`

其实对于文本内容还算ok了,但是当遇到img这样的 需要src着实困扰我。
最后得知,使用转义就可以动态的绑定了,
列入上面的
"javascript|记录一次使用原生js开发的日常jq生成列表"
然后用jq的html方法,追加到dom中。
全部的代码
`
Document - 锐客网转为结果

`

    推荐阅读