添加单击的元素到另一个元素

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')); 

根据append不能使用html。相反，你可以使用clone像：

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

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

<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 2

变化：$(this).html().appendTo($('div'));

到：

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

Answer 3

而不是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>