使用 AppendTo 显示来自 javascript 的内容答案

【问题标题】：Displaying content from javascript using AppendTo使用 AppendTo 显示来自 javascript 的内容
【发布时间】：2017-08-20 18:59:06
【问题描述】：

我正在使用 Trello API 和 javascript/jquery 来创建 Trello 板的汇总视图。我对 jquery 还很陌生，我无法使用 appendTo 正确布局我的页面。

以下是我在返回 javascript 内容后得到的 HTML。我的目标是让<h3> 和<p> 标签位于它们自己的 div 中（因此每个“列表标题”都包含在一个单独的 div 中），但我似乎只能在 div 中获得<p> 标签，<h3> 就在它外面。

<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 添加的。我相信这个问题与我如何嵌套 .each() 方法以及我如何在其中使用 appendTo() 有关。

<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>

【问题讨论】：

标签： javascript jquery append each

【解决方案1】：

当您调用$cards.empty(); 和appendTo($cards); 时，DOM 上不存在$cards，如果我是正确的，它只会在很久以后才声明和附加。

在尝试处理它之前尝试将其附加到 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);
       });
     });
   });
 });

【讨论】：