title: draw DIV using asynchrounous JS
body: <p>I do not need assistance in code but in designing the solution to my problem.</p>
  
  <p>I designed an asynchronous function exactly as explained in the accepted answer to this question: <a href="https://stackoverflow.com/questions/5010288/how-to-make-a-function-wait-until-a-callback-has-been-called-using-node-js">How to make a function wait until a callback has been called using node.js</a> . </p>
  
  <p>I also call that asynchronous function as described there:</p>
  
  <pre><code>myFunction(query, function(returnValue) {
    // Display returnValue and display it in a DIV called myDIV
  });
  </code></pre>
  
  <p><strong>My problem:</strong> </p>
  
  <p>I have a webpage containing a header, a footer and 2 DIVs in between them.</p>
  
  <p>Clicking on one of the DIVs leads to <em>erasing</em> (<code>display:none</code>) them and calling to <code>myFunction( ... )</code> above. But DIV  (in above comment) does not show itself between the header and the footer of the page.</p>
  
  <p>When I try this:</p>
  
  <pre><code>myFunction(query, function(returnValue) {
        // creating a DIV as a documentElement to display returnValue within it
        // document.body.append(myDIV)
  });
  </code></pre>
  
  <p>I see <code>myDIV</code> appended after the footer but not between the header and the footer of the page (in place of the 2 previous DIVs)</p>
  
  <p>Can you please tell me how to tackle this problem?</p>