利用JavaScript数组动态写入HTML数据节点

最新推荐文章于 2021-06-17 09:46:56 发布

weixin_34248849

最新推荐文章于 2021-06-17 09:46:56 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xuanya/p/6763003.html

本文介绍了一种使用数组动态生成HTML元素的方法，并通过统一的CSS样式进行渲染，以实现批量处理图片展示等功能，有效降低开发及维护成本。

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

如果想要使用数组来写入HTML数据，绝对需要的是一个Key值，由Key来引导遍历数组各项；此外，使用DOM原生方法写入文档，用同一个CSS样式渲染它们，这样可以极大地减少开发时间和减少维护成本，此方法适用于批处理：

首先我们需要创建一个数组，类似于JSON：

1 var value = {
2     id1: {photo:'../photo_1.jpg',title:'这是第一张图片！'},
3     id2: {photo:'../photo_2.jpg',title:'这是第二张图片！'},
4     id3: {photo:'../photo_3.jpg',title:'这是第三张图片！'},
5     id4: {photo:'../photo_4.jpg',title:'这是第四张图片！'},
6     id5: {photo:'../photo_5.jpg',title:'这是第五张图片！'},
7     id6: {photo:'../photo_6.jpg',title:'这是第六张图片！'}
8     };

接下来，我们可以通过DOM方法定位一个现有元素，利用数组的Key值遍历并写入到DOM：

 1 var new_activity = document.getElementById('new_activity');
 2 
 3 for(var key in value){    
 4     var dl = document.createElement('dl');
 5     dl.innerHTML = '<dd> <a href="#"> <img src="'+value[key]['photo']+'"> </a> </dd>';
 6     dl.innerHTML+= '<dt> <a href="#"> '+value[key]['title']+' </a> </dt>';
 7     dl.innerHTML+= '<dd><a href="#"><img src="avatar.jpg"></a><p><a href="#">在水一方</a></p><p><a href="#">查看(<i>60</i>)</a> <span>剩余<i>5</i>人</span></p></dd>';
 8     dl.innerHTML+= '<dd><span><i>16</i>人报名</span> <span><i>￥</i><i>1000</i>元</span></dd>';
 9     new_activity.appendChild(dl);
10 }