I cannot append elements with jQuery during javascript loop

Question

There is one similar question, but I still not understand why I can't do the following:

            var numLoaded = document.createElement('span')
            numLoaded = document.createElement('span')
            numLoaded.style= "color:red;font-weight:bold";

            numLoaded.innerHTML = " Number of loaded results: "+0;

            $("#resultsCounter").append(numLoaded)

            for (var i = ((json.length)-1); i >= 0; i--) { 
                newDiv = document.createElement("div");
                newDiv.id = +i+1;
                newDiv.innerHTML = newDiv.innerHTML+"..."

                numLoaded.innerHTML = " Number of loaded results: "+newDiv.id;
                $("#resultsCounter").empty(); // should remove my span
                $("#resultsCounter").append(numLoaded) // should add my span with new content
                $("#results").prepend(newDiv)
            }

After this all as output I see only last added element after whole cycle ends. During cycle iteration it appends to DOM no child, even if it is already created. I want to append always the same element <span> but in every iteration with updated number.

Why child element is added to DOM only after cycle ends? How to update it in cycle? Do I need to recreate that element after every loop iteration? It is way to speed up this process?

Why don't you just set new counter value like $(element).text(counter) instead of .innerHTML with append? — Alex Slipknot
– Alex Slipknot, Commented Oct 17, 2018 at 8:08
every iteration will overwrite your span at all. That's why you see just the last element. do you want to get a counter that will increase while loading like a progress bar? — user2399035
– user2399035, Commented Oct 17, 2018 at 8:18
@AlexSlipknot if i got it right OP wants to see like: "1", then "1" disappears and appears "2" and then "2" disappears and appears "3" and so on. — user2399035
– user2399035, Commented Oct 17, 2018 at 8:20
@LelioFaieta yes... something like number in progress bar ... but this is a bit special, because I count down due to later prepend()... but the sense is the same — Marek Bernád
– Marek Bernád, Commented Oct 17, 2018 at 8:21
js is quick enough to go through each step of the for loop that you will not see the intermediate changes. That's why @AlexSlipknot was suggesting you to append instead of replacing — user2399035
– user2399035, Commented Oct 17, 2018 at 8:26

Robin Zigmond · Accepted Answer · 2018-10-17 08:09:05Z

1

It's because you only create the element once, before the list. Then in the loop you are changing the innerHtml of the element, and adding it - but because it is the same element (the same JS object being referenced each time), it's effectively overwriting itself.

You just need to move these lines which create the element:

var numLoaded = document.createElement('span')
numLoaded = document.createElement('span')
numLoaded.style= "color:red;font-weight:bold";

numLoaded.innerHTML = " Number of loaded results: "+0;

inside the loop.

answered Oct 17, 2018 at 8:09

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marek Bernád Over a year ago

Still not understand why after overwriting itself there is no new value in that overwritten element ... it should be there if it overwrites with new values... but if I want understand it ...before loop, the JS remember the state of object after first append ... and during loop I cannot changed it because it inserts last known object out of loop?

Collectives™ on Stack Overflow

I cannot append elements with jQuery during javascript loop

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related