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

如果想要使用数组来写入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 }

当然，我还用innerHTML写入了一些其他的东西，无需在意。重要的是要注意语法， \'+value[key][\'photo\']+\'

这样，HTML中可以写入一系列的<dl><dd><dt>元素，接下来为它们写一个CSS样式即可全部渲染它们。这是一个很好的动态写入的方法！