2017-01-24 15 views
0

このコードを見て、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>

答えて

1

あなたの問題は、次のとおりです。

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

あなたがhtmlを使用することはできませんappendによります。

$('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>

+0

おかげでたくさんのgaetanoM、ひとつ簡単な質問:その代わり、あなたはclone内などを使用することができます!追加された要素にもクラスを追加する方法はありますか?私はjuatがクラスを追加することを意味します – user1760110

+0

@ user1760110スニペットが更新されました(addClass( 'red'))。お知らせ下さい – gaetanoM

1

変更:むしろappendTo、使用アペンド(より

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

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

$('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>

関連する問題