最近在使用jQuery的過程中遇到了一個很神奇的問題，就是在使用append()方法時遇到了bug。

$(document).ready(function(){
$("#test").append("
測試
");
$("#test").append("
測試
");
$("#test").append("
測試
");
$("#btn").click(function(){
$("#test").append("
測試
");
});
});

上面這段代碼是我遇到問題的一個簡單示例。在頁面中，我有一個id為test的div，一開始我往里面添加了三個p標簽。然后我為按鈕添加了一個點擊事件，點擊按鈕后又往div中添加了一個p標簽。

測試1
//初始添加的三個p標簽
測試2
測試3
添加//點擊添加按鈕后，再往div中添加一個p標簽

看起來這個代碼沒有什么問題，但是當我點擊添加按鈕時，就會發現一個bug：每次添加的p標簽都會重復添加之前已存在的p標簽。

測試1
//初始添加的三個p標簽
測試2
測試3
測試1
//點擊添加按鈕后，出現了重復的p標簽
測試2
測試3
測試1
測試2
測試3
添加//每次點擊添加按鈕都會添加重復的p標簽

這個問題看起來非常怪異，但是經過調試發現，是因為jQuery在某些情況下會緩存DOM元素，導致append()方法添加的新元素被更新了，而不是新添加。

解決這個問題其實很簡單，只需要在每次添加新元素前清空緩存就好了。修改代碼如下：

$(document).ready(function(){
$("#test").append("
測試
");
$("#test").append("
測試
");
$("#test").append("
測試
");
$("#btn").click(function(){
$.cache = {};   //清空緩存
$("#test").append("
測試
");
});
});

通過在每次點擊添加按鈕時清空緩存，我們就可以避免重復添加元素的問題。不過需要注意，清空緩存會影響性能，所以不要濫用。