draw DIV using asynchrounous JS

Question

I do not need assistance in code but in designing the solution to my problem.

I designed an asynchronous function exactly as explained in the accepted answer to this question: How to make a function wait until a callback has been called using node.js .

I also call that asynchronous function as described there:

myFunction(query, function(returnValue) {
  // Display returnValue and display it in a DIV called myDIV
});

My problem:

I have a webpage containing a header, a footer and 2 DIVs in between them.

Clicking on one of the DIVs leads to erasing (display:none) them and calling to myFunction( ... ) above. But DIV (in above comment) does not show itself between the header and the footer of the page.

When I try this:

myFunction(query, function(returnValue) {
      // creating a DIV as a documentElement to display returnValue within it
      // document.body.append(myDIV)
});

I see myDIV appended after the footer but not between the header and the footer of the page (in place of the 2 previous DIVs)

Can you please tell me how to tackle this problem?

score 1 · Accepted Answer · answered Sep 19 '16 at 07:13

1

// document.body.append(myDIV)

you are appending the div to the body and so it will always be the last element in the DOM

try adding a container div between your header and footer and append new elements to it

answered Sep 19 '16 at 07:13

Eyal Alsheich

452
4
12

it should be something like: ``
`` – Eyal Alsheich Sep 19 '16 at 07:17

score -1 · Answer 2 · answered Sep 19 '16 at 07:21

-1

Wrap those 2 DIV in a container DIV and assign the DIV an ID. By the time deleting the DIV don't delete the container. Now you can append the new element using the ID of container DIV.

$('#container').append(DIV);

answered Sep 19 '16 at 07:21

ricky

1,644
1
13
25

draw DIV using asynchrounous JS

2 Answers2