记录一次使用原生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
                    }
                ]
            };`

相对来说这算正常的简单数据了吧，
然后 开始创建基本模板
` 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 + '秒' + '
' +
                    "" +
                    '
'
                )
            })
            videoResult.push('
');
            $('#resultText').html(videoResult)`

其实对于文本内容还算ok了，但是当遇到img这样的 需要src着实困扰我。
最后得知，使用转义就可以动态的绑定了，
列入上面的
""

然后用jq的html方法，追加到dom中。
全部的代码
`

    
    
    
    
    


    

        转为结果
        

    

`