jquery フォームのコピーについて完全に忘却していたので一生忘れないためのメモ

html

<ul>
<li>test1</li>
<li>test2</li>
</ul>

こんなhtmlがあって、1つ目のliをコピーしてulに追加したいとする。そこでまずコンソールにコピー元のhtmlを表示する。

javascript

console.log($("ul li:first"));

chromeのコンソールの結果

[li, prevObject: n.fn.init[1], context: document, selector: "ul li:first"]

何が何だかさっぱりわからん。なので↓のようにする。

javascript

console.log($("ul li:first").html());

chromeのコンソールの結果

test1

なんでliタグが含まれないんじゃ～～～～っとアホみたいに2時間くらいはまった。本当に死にたい。
結局html()を使ったのが間違いだったことに気が付く。html()を使うと「内部の要素を取得」する訳だから当たり前の話なのに2時間もはまって自分を本当にぶっ殺したくなる。
前の記事にも書いたけどコンソールで対象のhtmlを見たい場合は以下のようにする。

javascript

$(function(){
$.fn.log = function() {
  console.log.apply(console, this);
  return this;
};
$("ul li:first").log();
});

chromeのコンソールの結果

<li>test1</li>

ここまで理解できれば後はコピーするだけ。

javascript

var html = $("ul li:first").clone(true).html();
$("ul").append(html);

追加後のhtml

<ul>
<li>test1</li>
<li>test2</li>
test1
</ul>

なんでliがコピーされないんじゃ！！！ってこれで本当にアホみたいに2時間はまった。自分ぶっ殺したくてしょうがねえ。

正解は以下

javascript

$("ul li:first").clone(true).appendTo("ul");

追加後のhtml

<ul>
<li>test1</li>
<li>test2</li>
<li>test1</li>
</ul>

javascriptやっていると本当に自分を殺したくなってくる。もう2度と忘れないこと。

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html