有问题将点击元素附加到另一个元素

Question

您能否看一下这段代码，让我知道为什么我无法使用jQuery将整个点击元素附加到目标？

$('button').on('click', function(){
   $(this).html().appendTo($('div'));
});

div{
  height:300px;
  width:300px;
  background:khaki;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Me To Box</button>

<div></div>

Answer 1

更改：$(this).html().appendTo($('div'));

为：

$('div').append($(this).html())

Answer 2

您的问题是：

$(this).html().appendTo($('div'));

根据append，您无法使用html。相反，您可以使用clone，例如：

＆＃13;

＆＃13;

$('button').on('click', function(){
  //$(this).clone(true).appendTo($('div'));
  $(this).clone().addClass('red').appendTo($('div'));
});

＆＃13;

div{
  height:300px;
  width:300px;
  background:khaki;
}
.red {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button>Add Me To Box</button>

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用append（）：

而不是appendTo

$('button').on('click', function(){
  $("div").append($(this).html() );
});

div{
  height:300px;
  width:300px;
  background:khaki;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Me To Box</button>

<div></div>