记录一次使用原生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('<ul>');
            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(
                    '<li>' +
                    '<div>' + '识别结果：' + rate+ resType + '</div>' +
                    '<div>' + '出现时间：' + item.time + '秒' + '</div>' +
                    "<img src=\""+resultImg +"\" style=\"width: 288px\" />" +
                    '</li>'
                )
            })
            videoResult.push('</ul>');
            $('#resultText').html(videoResult)`

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        转为结果
        <div id="myResult"></div>
    </div>
</body>

<script>
window.onload = function () {
    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 resArr = response.result;
            // <li>
                //     <div>识别结果：45%正常</div>
                //     <div>出现时间 12s</div>
                //     <img src="" alt="">
                //         </li>
                var videoResult = [];
                videoResult.push('<ul>');
                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 = '未知类型';
                    }


                    console.log(resultImg)
                    videoResult.push(
                        '<li>' +
                        '<div>' + '识别结果：' + rate+ resType + '</div>' +
                        '<div>' + '出现时间：' + item.time + '秒' + '</div>' +
                        "<img src=\""+resultImg +"\" style=\"width: 288px\" />" +
                        '</li>'
                    )
                })
                videoResult.push('</ul>');


    $('#myResult').html(videoResult)
}

</script>
</html>

`