JavaScript 從陣列取值並填入 Div 完整範例

給定陣列 var arrData = [{ "picture": "...", "ABC": "abcd" }];，如何將 ABC 的值放入 <div>？關鍵在於 給目標元素加上 id，再用 document.getElementById 寫入。

完整程式碼

<div id="myid" style="height:100%;width:100%"></div>
<script>
var arrData = [{
  "picture": "2_2_content/css/myImg/picture11.png",
  "ABC": "abcd"
}];
document.getElementById('myid').innerHTML = arrData[0].ABC;
</script>

關鍵步驟解析

1. HTML 標籤必須有 id="myid"，否則無法精準選取。
2. arrData[0] 取第一個物件，.ABC 存取屬性值。
3. 使用 innerHTML 直接寫入文字內容；若含 HTML 標籤亦會解析渲染。

擴充：動態渲染多筆資料

<div id="container"></div>
<script>
var arrData = [/* 多筆資料 */];
var html = arrData.map(item => '<div>' + item.ABC + '</div>').join('');
document.getElementById('container').innerHTML = html;
</script>