javascript - How to append an element loaded via ajax to another previously loaded via ajax? -

how can add html element received via ajax html element added via ajax? tried use .append not working:

example:

$.ajax({ (...), success: function() { $('.padding').append('<div id="request">foo</div>') } }); 

this above working well, because .padding loaded on page. when try

$.ajax({ (...), success: function(data) { $('#request').append('<div class="description">bar</div>') } }); 

not working. why , how can right way?

below, .padding content:

<div class="padding">     <!-- below, html result first ajax  -->         <div class="ui attached segments" id="request">          <div class="ui right center aligned segment" id="header">              <h4 class="ui gray header"> p2017003</h4>         </div>         <div class="ui stackable 3 item menu segment">             <div style="justify-content: flex-start" class="item">                 <button class="ui button">                     <i class="left chevron icon"></i>                     voltar                 </button>             </div>             <div class="item">                 <!--buttons ajax-->                 <div class="two ui red inverted small buttons segment-controller">                     <button id="detalhes" class="ui active button">                         detalhes                     </button>                     <button id="acompanhar" class="ui button">                         acompanhar                     </button>                 </div>             </div>             <div style="justify-content: flex-end" class="item">                 <button class="ui button">imprimir</button>             </div>         </div>         <div class="ui main segment">             p-2017-003         </div>     </div> </div> 

i've rigged setup simulate situation. i've never once encountered situation div id request not present in dom.

function getdataa() {    return $.ajax({      url: 'https://jsonplaceholder.typicode.com/posts/1'    }).then(result => {      $('.padding').append('<div id="request">call finished</div>');    });  }    function getdatab() {    return $.ajax({      url: 'https://jsonplaceholder.typicode.com/posts/2'    }).then(result => {      if ($('#request').length === 0) {        console.log('no request element found');      }      $('#request').append('<div class="description">call b finished</div>');    });  }    getdataa()    .then(getdatab);

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

my guess second call done before first call. perhaps code this:

getdataa(); getdatab(); 

now you're depending on call finishes first. when call b finishes first code breaks , when call finishes first you're in luck.

you run both requests in parallel if want, require using $.when().

function getdataa() {    return $.ajax({      url: 'https://jsonplaceholder.typicode.com/posts/1'    });  }    function getdatab() {    return $.ajax({      url: 'https://jsonplaceholder.typicode.com/posts/2'    });  }    $.when(getdataa(), getdatab())    .then(function(resulta, resultb) {      $('.padding').append('<div id="request">call finished</div>');      $('#request').append('<div class="description">call b finished</div>');    });

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

i've tried provided html , still not able reproduce situation.

function getdataa() {    return $.ajax({      url: 'https://jsonplaceholder.typicode.com/posts/1'    }).then(result => {      $('.padding').append(`          <!-- below, html result first ajax  -->          <div class="ui attached segments" id="request">           <div class="ui right center aligned segment" id="header">               <h4 class="ui gray header"> p2017003</h4>          </div>          <div class="ui stackable 3 item menu segment">              <div style="justify-content: flex-start" class="item">                  <button class="ui button">                      <i class="left chevron icon"></i>                      voltar                  </button>              </div>              <div class="item">                  <!--buttons ajax-->                  <div class="two ui red inverted small buttons segment-controller">                      <button id="detalhes" class="ui active button">                          detalhes                      </button>                      <button id="acompanhar" class="ui button">                          acompanhar                      </button>                  </div>              </div>              <div style="justify-content: flex-end" class="item">                  <button class="ui button">imprimir</button>              </div>          </div>          <div class="ui main segment">              p-2017-003          </div>      </div>      `);      const        trigger = document.getelementbyid('detalhes');      trigger.addeventlistener('click', getdatab);    });  }      function getdatab() {    return $.ajax({      url: 'https://jsonplaceholder.typicode.com/posts/2'    }).then(result => {      if ($('#request').length === 0) {        console.log('no request element found');      }      $('#request').append('<div class="description">call b finished</div>');    });  }      const    trigger = document.getelementbyid('fill-padding');  trigger.addeventlistener('click', getdataa);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="fill-padding" type="button">fill padding</button>  <div class="padding">  </div>