獲取div的html，並將相同的內容添加到div，但只有第一個元素

我沒有更多的手jQuery。我想獲取div的內容並將相同的內容添加到div，但它會添加多個項目。獲取div的html，並將相同的內容添加到div，但只有第一個元素

可能是這段代碼清楚地解釋了我的問題。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     var data = $('#xyz').html(); 
     $(data).appendTo("#xyz"); 
    }); 
}); 
</script> 
</head> 
<body> 
<span id="xyz"><p>Test</p></span> 
<button>ADD</button> 
</body> 
</html>

我正在採取選擇器xyz的內容並將內容添加到相同的選擇器正在工作，但它增加了雙倍的時間。

電流輸出

測試

添加

單擊添加輸出會後

測試

再加

單擊添加輸出會後

測試

添加

，但我希望它是

測試

添加

不是4測試只有3個測試

任何一個可以幫我整理出來這個。

來源

2016-11-25 Ashish Madankar

根據你的結構，這是正確的行爲。請參閱下面的答案。 – irot

'var data = $（'＃xyz'）。html（）; $（「button」）。click（function（）{（「＃xyz」）。append（data）; }）; – Developer

確保事件處理程序之前捕捉跨度的內容：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var data = $('#xyz').html(); 
    $("button").click(function(){ 
     $(data).appendTo("#xyz"); 
    }); 
}); 
</script> 
</head> 
<body> 
<span id="xyz"><p>Test</p></span> 
<button>ADD</button> 
</body> 
</html>

否則，它會得到當你點擊，其中包括由前點擊

來源

2016-11-25 07:25:12 Robba

由於添加的內容的內容我在我的評論中提到，這是正確的行爲，因爲每當您撥打.html()時，您都會收到不斷變化的#xyz的全部內容。例如：

首先負載，.html()將返回：

<p>Test</p>

先加，.html()將返回：

<p>Test</p> 
<p>Test</p>

二ADD，.html()將返回：

<p>Test</p> 
<p>Test</p> 
<p>Test</p>

你是每次添加x新元素你按ADD。如果您只想每次只添加一行<span>，則需要check this out。

來源

2016-11-25 07:30:49 irot

試試這個，它對我有用。

$(document).ready(function() { 
    $("button").click(function() { 
     var data = $('#xyz p')[0].outerHTML; 
     $(data).appendTo("#xyz"); 
    }); 
});

來源

2016-11-25 07:32:44

獲取div的html，並將相同的內容添加到div，但只有第一個元素

回答

相關問題