利用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樣式即可全部渲染它們。這是一個很好的動態寫入的方法！