Home/ Questions/Q 8904351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:06:29+00:00

I make an xhr request, I get the response and I append some values

  • 0

I make an xhr request, I get the response and I append some values that I get to a table by appending. then I make second xhr request on another page, get some other results that I want to append under the previously inserted row..the problem is that every next append that I make instead of getting “under” the previously created row, gets before it..
I guess this is because these are dynamically created..but is there any way to solve this? without adding classes or ids to table or rows..

here is my code..
first the html 

<body>
    <table border="1">
        <tr>
        <th>first cell</th>
        <th>second cell</th>
        </tr>
    </table>
    <div id="div1">
</body>

and my javascript

 function response(url, callback{
     //xhr request
  }

var url1 = "http://example1.com";
request(url1, function(response){
        var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);
 });
var url2 = "http://example1.com";
request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
    var temp5create = document.createElement("tr");
    var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp5create.innerHTML = temp6;
    temp4.appendChild(temp5create);
 });

so, instead of having new row added after previous row, it gets before..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It could be that the first xhr request is taking longer to complete than the second one. Therefore the second one appends its response before the first receives and appends its response. You could either make placeholder rows in the table if a fixed amount of requests will come back, such as:

    <body>
    <table border="1">
        <tr>
            <th>first cell</th>
            <th>second cell</th>
        </tr>
        <tr id="tr1">

        </tr>
        <tr id="tr2">

        </tr>
    </table>
</body>

    and javascript: 

    (url1,response())
{
    document.getElementById("tr1").innerHTML("someresponse");
}

(url2,response())
{
    document.getElementById("tr2").innerHTML("some other response");
}

    Or you could link the requests to occur in sequence if time is not of the essence.

    request(url1, function(response){
    var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);

    var url2 = "http://example1.com";
    request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
        var temp5create = document.createElement("tr");
        var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
        temp5create.innerHTML = temp6;
        temp4.appendChild(temp5create);
     });
});
    • 0