AppendToを使用してjavascriptからコンテンツを表示

Question

私はTrello APIをjavascript/jqueryとともに使用して、Trelloボードの要約ビューを作成しています。私はかなりjqueryに新しいですし、正しくページをレイアウトするためにappendToを使用するのに問題があります。

以下は、javascriptのコンテンツが返されたら取得しているHTMLです。私の目標は<h3>タグと<p>タグをそれぞれのdivに入れることです（各 "List Title"は別のdivに含まれています）。代わりに<h3>をdivの中に入れてdivに<p>というタグしか表示されないようですそれの。

<div id="output"> 
    <div id="boards"> 
     <h3 class="board">List Title 1</h3> 
     <div> 
      <p class="card">Card 1 Name</p> 
      <p class="card">Card 2 Name</p> 
      ... 
     </div> 
     <h3 class="board">List Title 2</h3> 
     <div> 
      <p class="card">Card 1 Name</p> 
      ... 
     </div> 
    </div> 
</div> 

これは私のjavascriptです。私が始めている基本HTMLには、<div id="output></div>が含まれています。他のすべてのHTMLはこのjavascriptによって追加されています。私は問題が私がどのように（）メソッドをネストしているのか、それらの中でどのようにappendTo（）を使用しているのかと関係していると思います。あなたは$cards.empty();とappendTo($cards);を呼び出す時

<script type="text/javascript"> 
     var $boards = $("<div>") 
     .attr("id", "boards") 
     .text("Loading Boards...") 
     .appendTo("#output"); 

     Trello.get("/boards/YSP62hqc/lists", function(boards) { 
      $boards.empty(); 
      $.each(boards, function(ix, board) { 
      $("<h3>") 
      .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id}) 
      .addClass("board") 
      .text(board.name) 
      .appendTo($boards); 
      console.log("List Added"); 
      var resource = "/lists/" + board.id + "/cards"; 
      Trello.get(resource, function(cards) { 
       $cards.empty(); 
       $.each(cards, function(ix, card) { 
       console.log(card.labels[2]); 
       $("<p>") 
       .attr({target: "trello"}) 
       .addClass("card") 
       .text(card.name) 
       .appendTo($cards); 
       }); 
      }); 
      var $cards = $("<div>") 
      .text("Loading Cards...") 
      .appendTo($boards); 
      }); 
     }); 
</script> 

Answer 1

、$cardsは、私が正しいんだ場合にのみ宣言され、かなり後に追加されるDOM、上に存在しません。

処理する前にDOMに追加してみてください。すなわち、

var $boards = $("<div>") 
    .attr("id", "boards") 
    .text("Loading Boards...") 
    .appendTo("#output"); 

Trello.get("/boards/YSP62hqc/lists", function(boards) { 
    $boards.empty(); 
    $.each(boards, function(id, board) { 

    $("<h3>") 
     .attr({ href: board.url, target: "trello", value: board.id, name: board.id, id: board.id }) 
     .addClass("board") 
     .text(board.name) 
     .appendTo($boards); 

    var resource = "/lists/" + board.id + "/cards"; 

    var $cards = $("<div>") 
     .text("Loading Cards...") 
     .appendTo($boards); 

    Trello.get(resource, function(cards) { 
     $cards.empty(); 
     $.each(cards, function(ix, card) { 
     $("<p>") 
      .attr({ target: "trello" }) 
      .addClass("card") 
      .text(card.name) 
      .appendTo($cards); 
     }); 
    }); 
    }); 
});