jquery - 为什么apprend ("")这么奇怪

Question

我在 jquery 中 append 时遇到问题

当我写这样的代码时

<小时/>

<script>
  $(document).ready(function(){
    for(var a=0;a<5;a++){
          var u=$("#nav").append("<li >a_"+a);
               u.append("<ul>");
                   for(var b=0;b<5;b++){
                       u.append("<li>b_"+b+"</li>");
                   }
                u.append("</ul>")

          $("#nav").append("</li>")
     }
    });

 </script>
  <div class="section-tree">
  <ul id="nav"></ul>         </div>

它的输出如下:

这不是我想要的

我想要的是:

  <ul>

   <li> 
    a_0
      <ul>
         <li>b_1</li>
         <li>b_2</li>
         <li>b_3</li>
         <li>b_4</li>
         <li>b_5</li>
      </ul>
   </li>

   <li> 
   a_1
      <ul>
        <li>b_1</li>
        <li>b_2</li>
        <li>b_3</li>
        <li>b_4</li>
        <li>b_5</li>
      </ul>
  </li>
        ...
</ul>

为什么不对？

Hello World hell 世界 hell 世界 hell 世界

Answer 1

首先将其连接到变量，然后使用 .append() 请参阅下面的代码片段了解更多信息。

$(document).ready(function() {
  var data = "";
  for (var a = 0; a < 5; a++) {
    data += "<li >a_" + a;
    data += "<ul>";
    for (var b = 0; b < 5; b++) {
      data += "<li>b_" + b + "</li>";
    }
    data += "</ul></li>";
  }
  $("#nav").append(data)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>


</script>
<div class="section-tree">
  <ul id="nav"></ul>
</div>