jQuery AJAX 獲取列表數據並正確渲染多條記錄的常見錯誤

錯誤代碼

$.each(data.planList, function(index, content) {
    $("#plan_content").append("<a href='#'>" + content.plan_content + "</a>");
});

#plan_content 是唯一 <span>，append 會不斷在同一元素內疊加，導致只看到最後一條或樣式混亂。

修正：使用容器並建立獨立元素

var $container = $("#plan_container"); // 改為 <div id="plan_container">
$.each(data.planList, function(i, item) {
    $container.append($("<div>").append($("<a>", {href:'#', text: item.plan_content})));
});

關鍵點

• 確保後端確實回傳陣列（console.log(data.planList.length) 驗證）。
• 容器使用 <div> 或 <ul>，每筆資料產生獨立 DOM 節點。
• 若資料量大，考慮虛擬清單或分頁載入。