为什么不能多次追加jQuery对象？

Question

我很难理解为什么jQuery对象不能被多次追加：

的jQuery

var $divObj = $('<div/>', { 'text': 'This is a div!' });

$('button').on('click', function() {
  $('#example').append($divObj);
});

标记

<div id="example"></div>
<button>Add Div</button>

这仅在第一次点击button时有效。后续点击似乎没有做任何事情。

我知道我可以在追加对象时使用clone()，或者可以将div作为字符串传递，但是我正在寻找关于为什么追加对象的解释不止一次工作。

Here's a sample fiddle

Answer 1

因为$divObj拥有对DOM元素的引用（嗯，jQuery对象，但它只包含DOM元素）。将该元素追加到DOM时，$divObj仍引用同一个对象。将它插入DOM时，它不会神奇地复制它。

正如您所说，您可以使用.clone()创建节点的新副本，该副本可以单独添加。

Answer 2

问题是，在完全加载页面后，它没有从$ divObj中获取值 如果您想在每次单击时显示消息，可以将$ divObj置于单击功能中，它将起作用。
这是代码更改。

$('button').on('click', function() {
    var $divObj = $('<div />', { 'text': 'This is a div!' });
    $('#example').append($divObj);
}); 

由于