jQueryとチェーンでDOM要素を操作する

Question

jQueryで少し遊んでいます（申し訳ありませんが、完全なnoob）なぜこれがうまくいかないのだろうかと思っていました。たぶん私は連鎖、文脈、DOM操作の仕方が得られないだろうが、私はただ好奇心が強い。ここにそれが行く：

$("#myDiv") 
    .append("h3") 
    .append("a") 
    .attr("href", "http://example.com") 
    .text("Click here") 
    .end(); 

私が起こることを期待するもの：

• 選択#myDiv
• H3の内側その後
• 内部H3を挿入し、タグ
• セットを挿入URLへのAタグのHREF属性
• そして、Aタグのテキストを「ここをクリック」に設定します。

代わりに私のページのマークアップが完全に台無しに見えますが、私は動的DOMを見ることができないので、何が起こっているのか分かりません。 jQueryのドキュメントを間違って読んでいますか？

Answer 1

それは

$("#myDiv") 
    .append("<h3>").children('h3:last') 
    .append("<a>").children('a:last') 
    .attr("href", "http://example.com") 
    .text("Click here") 

各メソッドは、（findようtraversingもの、childrenなどを除く）、それを実行した上で、元のjQueryオブジェクトを返しますので、あなたがそれらの作業を続けることができなければなりません。

.end()を完全に削除しました。これは、jQueryオブジェクトを変更するトラバースメソッドを使用する場合にのみ便利です。

---

だからあなたのオリジナルのもの、（あなたがタグを追加したい場合は、APPENDにHTMLタグを必要とすることにエラー以外が）#myDivにh3を追加します、そして、次に設定され、#divに再びaを追加属性hrefを#myDivに設定し、最終的にそのテキストを#myDivsというテキストに設定します）;。

すべては#myDivで行われます。ここで

Answer 2

あなたが行く：

$('#myDiv') 
    .append($('<h3>') 
     .append($('<a>') 
      .text('Click here') 
      .attr('href', 'http://example.com'))); 

ライブデモ：DOMは、（= H3要素がDIVに追加されたときに）一度だけ時に操作されていることhttp://jsfiddle.net/HNMET/1/

お知らせ。

---

上記のコードは少しトリッキーであるので（それは少し私が推測混乱させるもの）、Iは3行にそれを分解しました。注、これは実質的に同じコードで、私はそれを読みやすくするために、2つの「ヘルパー」の変数をのみ追加しました：

var anchor, h3; 

anchor = $('<a>').text('Click here').attr('href', 'http://example.com'); 
h3 = $('<h3>').append(anchor); 
$('#myDiv').append(h3); 

ライブデモ：http://jsfiddle.net/HNMET/11/