jQuery append 產生雙倍行數：缺少閉合標簽導致瀏覽器自動補全產生巢狀結構

錯誤代碼

var lihtml = "<li>" + idArr[x] + "." + qArr[x] + "<li>"; // 缺少 / 關閉標簽
$(".swiper-slide:eq(0) ul").append(lihtml);

瀏覽器行為解析

1. HTML 解析器遇到 <li>內容<li>（無閉合標簽）。
2. 按 HTML5 規範，**自動補全**：將第二個 <li> 視為新列表項的開始，並為第一個 <li> 隱式插入 </li>。
3. 結果 DOM：<li>內容</li><li></li> — 產生**兩個** li 元素，第二個為空。
4. 循環 N 次 → 2N 行，呈現「雙倍」現象。

修正代碼

var lihtml = "<li>" + idArr[x] + "." + qArr[x] + "</li>"; // 加上 /
$(".swiper-slide:eq(0) ul").append(lihtml);

最佳實踐：避免手拼 HTML 字符串

// 1. 使用 jQuery 創建元素（自動閉合、轉義、安全）
$("<li>").text(idArr[x] + "." + qArr[x]).appendTo(".swiper-slide:eq(0) ul");

// 2. 模板字符串 + 批量 append（性能更好）
var fragments = idArr.map((id, i) => `<li>${id}.${qArr[i]}</li>`).join("");
$(".swiper-slide:eq(0) ul").append(fragments);

// 3. 原生 DOM（最高性能）
var ul = document.querySelector(".swiper-slide:eq(0) ul");
var frag = document.createDocumentFragment();
idArr.forEach((id, i) => {
    var li = document.createElement("li");
    li.textContent = id + "." + qArr[i];
    frag.appendChild(li);
});
ul.appendChild(frag);

同類常見自閉合標簽陷阱

「手拼 HTML 字符串必帶閉合標簽」—— 或干脆用 $("<li>").text(...) 讓庫幫你守住合法 DOM 結構。