JS遍历数组并通过innerHTML 显示到HTML中

最新推荐文章于 2023-04-16 10:19:35 发布

杨北林

最新推荐文章于 2023-04-16 10:19:35 发布

阅读量2k

点赞数 3

分类专栏：前端基础文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_43405812/article/details/127221719

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS遍历数组并通过innerHTML 显示到HTML中

HTML代码

<body>
<div id="dailyList"></div>
</body>

JavaScript代码

function getDelayOrderInfo(){
        //自定义数组
        var Str = '';
		var Arr = [
			{
		        "materialName": "eiusmod enim dolor aliqua",
		        "qty": -21413570,
		        "dictStatus": 30
	        },
		    {
		        "materialName": "Ut veniam minim",
		        "qty": -64645376,
		        "dictStatus": 50
		    },
		    {
		        "materialName": "Excepteur id consequat reprehenderit",
		        "qty": -9399905,
		        "dictStatus": 30
		    },
		    {
		        "materialName": "dolor Lorem in est eu",
		        "qty": -55786600,
		        "dictStatus": 10
		    },
		    {
		        "materialName": "ut reprehenderit",
		        "qty": -45269221,
		        "dictStatus": 20
		    },
		    {
		        "materialName": "occaecat ex sunt pariatur",
		        "qty": 55450270,
		        "dictStatus": 40
		    },
		    {
		        "materialName": "anim nulla esse occaecat",
		        "qty": 71426454,
		        "dictStatus": 10
		    },
		    {
		        "materialName": "aliqua sunt amet",
		        "qty": -12119945,
		        "dictStatus": 30
		    },
		    {
		        "materialName": "incididunt ullamco consequat minim",
		        "qty": 71452085,
		        "dictStatus": 30
		    },
		    {
		        "materialName": "fugiat",
		        "qty": 56551946,
		        "dictStatus": 10
		    },
		    {
		        "materialName": "fugiat amet nisi",
		        "qty": -23880850,
		        "dictStatus": 10
		    }
		]
        for(let i = 0;i<Arr.length;i++){
            Str +=  '<ul>'
                        +'<li style="width:200px;">'+(Arr[i].materialName)+'</li>'
                        +'<li>'+(Arr[i].qty)+'</li>'
                        +'<li>'+(Arr[i].dictStatus)+'</li>'
                    +'</ul>'
        }
        //拼接完字符串数组后用innerHTML把它渲染到页面中
        document.getElementById('dailyList').innerHTML = Str 
    }