javascript - 在现有的 html 结构中动态附加 div 标签

Question

我需要在现有的 html 结构中附加一个 div 标签。问题是我无法定位 div，之后我需要附加新的 div。我需要将我的 div 附加到“自动滚动”div 中。附加的 div 是动态生成的。

目前正在发生的是 div 被附加到 ID 为“cases”的 div 中。但我希望它附加到“自动滚动”div 中。

这是 html 结构:

<div class="wrapper" id="cases">
  <div class="row">
    <div class="col-md-12 case-view-header">Header text</div>
  </div>
  <div class="auto-scroll">
  </div>
</div>

我的代码:

$.each(caseRecords, function(index, value) {
     var tb = $('#cases');
     var autoscroll = $('.auto-scroll');        
     var html =    "<div class='row data animate-row'>";
     html = html + "  <div class='col-xs-12 col-sm-2 col-md-2 col-lg-2 case-view-other height-fix'>" + this.c.CaseNumber + "</div>";
     html = html + "  <div class='col-xs-12 col-sm-4 col-md-4 col-lg-4 case-view-other height-fix'>" + this.c.Account.Name + "</div>";
     html = html + "  <div class='col-md-3 case-view-other height-fix'>" + this.cm.MilestoneType.Name + "</div>";

     html = html + "  <div class='col-xs-12 col-sm-3 col-md-3 col-lg-3 case-view-other height-fix align-center timer-case'>  ";
     html = html + "    <div id='CountDownTimer" + index + "' data-timer='" + this.seconds + "'></div>";
     html = html + "    <div id='CountDownTimerText" + index + "' style='display: inline-block; position:absolute;'></div>";
     html = html + "  </div>";
     html = html + "</div>";

     tb.append(html);

     setupCounter('CountDownTimer' + index, 'CountDownTimerText' + index, this.targetSeconds);

 });

Answer 1

目前发生的情况是 div 被附加到 ID 为“cases”的 div 中。但我希望它附加到“自动滚动”div 中。

那是因为 tb 是 #cases div 的对象，而您正在向它附加内容。您需要使用 auto-scroll 类定位内部 div:

var tb = $('#cases .auto-scroll');