CODEWITHSUNDEEP
javascriptjquery
Zee
Zee

Reputation: 161

Append div tag dynamically inside an existing html structure

I need to append a div tag inside an existing html structure. The problem is I am not able to target the div after which I need to append the new div. I need to append my div inside the "auto-scroll" div. And the div that is appended is getting dynamically generated.

What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.

Here is the html structure:

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

My code:

$.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);

 });

Upvotes: 1

Views: 446

Answers (3)

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

instead of

 tb.append(html);

use 

autoscroll.append(html);

because tb is #cases whereas autoscroll is the element which you required

Upvotes: 0

huan feng
huan feng

Reputation: 8623

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.

That is because tb is object of #cases div and you are appending contents to it. you need to target the inner div with class auto-scroll:

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

Upvotes: 2

Related Questions