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

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

 

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

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

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

var new_activity = document.getElementById('new_activity');

for(var key in value){    
    var dl = document.createElement('dl');
    dl.innerHTML = '<dd> <a href="#"> <img src="'+value[key]['photo']+'"> </a> </dd>';
    dl.innerHTML+= '<dt> <a href="#"> '+value[key]['title']+' </a> </dt>';

    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>';
    dl.innerHTML+= '<dd><span><i>16</i>人报名</span> <span><i>￥</i><i>1000</i>元</span></dd>';
    new_activity.appendChild(dl);
}

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

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