在现有的 html 结构中动态附加 div 标签答案

【问题标题】：Append div tag dynamically inside an existing html structure在现有的 html 结构中动态附加 div 标签
【发布时间】：2015-04-02 06:47:18
【问题描述】：

我需要在现有的 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);

 });

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

 var tb = $('.auto-scroll').append(html);

【讨论】：

考虑通过描述您如何获得结果或提供更多信息来解释您的代码。
@Nirazul 感谢您的指出。 div.auto-scroll 是应该附加的目标，显然这个答案不够好，'.auto-scroll' 可能是一个常见的类，这里应该更准确的具体选择

【解决方案3】：

而不是

 tb.append(html);

使用

autoscroll.append(html);

因为 tb 是 #cases 而 autoscroll 是您需要的元素

【讨论】：