jQuery 動態創建兩個 span 插入 p 標簽：避免重用同一對象導致只生成一個

需求：在 `

` 內動態生成 `` 和 ``。錯誤代碼重用同一 span 變量：

var span = $("");
p.append(span);
span.addClass("channelId");
span.text(channelId);
p.append(span); // 再次追加同一對象 → 只是移動位置
span.text(channelName);
span.addClass("channelName");

正確寫法：創建兩個獨立對象

var p = $("
");
var span1 = $("").addClass("channelId").text(channelId);
var span2 = $("").addClass("channelName").text(channelName);
p.append(span1).append(span2);
item.append(p);

鏈式調用更優雅

$("
")
    .append($("").addClass("channelId").text(channelId))
    .append($("").addClass("channelName").text(channelName))
    .appendTo(item);

核心原則

• 每次 $("") 創建**新 DOM 元素**。
• 同一 jQuery 對象多次 append 只會移動，不會複製。
• 需多個同類元素時，循環或鏈式創建多個對象。