ハマったのでメモ。
例えば二つのリストがあって、クリックしたらもう一方に対象の要素を複製したいとする。
<ul id="list1">
<li><span>要素1</span></li>
</ul>
<ul id="list2">
<!--ここに<li>要素を移動したい-->
</ul>
$(function(){
$("#list1 li").on("click",function(){
$("#list2").append($(this).html());
});
});
何の疑いもなくこれでイケると思ってたのに実際は、
<ul id="list1">
<li><span>要素1</span></li>
</ul>
<ul id="list2">
<span>要素1</span>
<!--ここに<li>要素を移動したい-->
</ul>
・・・外側の<li>がない;;
$(this).html() がthis(上の例の場合は<li>)の中身を取得するものだとは知らなかった><
対象の範囲としては
$(this).remove();//this自体が対象
$(this).empty()//thisの中身が対象
$(this).text()//thisの中身が対象
empty()やtext()の仲間なんですね(jQuery使い慣れてる人には当然の事?)
で、解決策。
$(function(){
$("#list1 li").on("click",function(){
$("#list2").append($(this).get(0).outerHTML);
});
});
$(this).html() を $(this).get(0).outerHTMLに変えればOK。
get([index])
outerHTML
場当たりでコード書いてるからこういう基本的なことでハマってしまう。ドキュメント読んでからコード書く癖付けないとだめだなぁ;;