在前端開發中,經常需要處理數據并呈現在頁面上。其中,
和JSON都是非常重要的概念。下面將介紹如何使用循環遍歷JSON數據,并通過
標簽將其呈現在頁面上。
var jsonData = [ { "name": "張三", "age": 18, "gender": "男" }, { "name": "李四", "age": 19, "gender": "女" }, { "name": "王五", "age": 20, "gender": "男" } ]; for (var i = 0; i< jsonData.length; i++) { var div = document.createElement("div"); div.innerHTML = "姓名:" + jsonData[i].name + "
" + "年齡:" + jsonData[i].age + "
" + "性別:" + jsonData[i].gender + "
"; document.body.appendChild(div); }
上面的代碼定義了一個JSON數組,里面包含了三個對象。接著用for循環遍歷這個數組,并創建一個
標簽。在
標簽中填充了每個對象的屬性值,并通過document.body.appendChild()方法將這個
標簽添加到頁面中。
最終,我們可以在頁面中看到如下的內容:
姓名:張三
年齡:18
性別:男
姓名:李四
年齡:19
性別:女
姓名:王五
年齡:20
性別:男
這樣,我們就成功地通過
標簽和JSON數據,實現了頁面的動態呈現。在實際開發中,這一技術非常常用,希望大家掌握好這一技能。