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

时间:2015-04-02 06:47:19

标签: javascript jquery

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

 });

3 个答案:

答案 0 :(得分:2)

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

这是因为tb是#cases div的对象,你正在向它添加内容。你需要用类auto-scroll来定位内部div:

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

而不是

 tb.append(html);

使用

autoscroll.append(html);

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