I have a small example:
let length = $('body > p').length;
console.log(length);
$('body').append($('<p>').text('plain text'));
console.log(length);
setTimeout(() => console.log(length), 1000)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>My question: after appending, why wouldn't length update new value (1)? I've tried to delay 1 second before logging, but same result. Why?
That is because let length = $('body > p').length was parsed/evaluated before appending the element.
And after appending the element it is not parsed again.
You can create function & call it
function showLength(){
let length = $('body > p').length;
console.log(length);
}
Also inside setTimeout length is not a function which is to be executed
In your code call it
showLength();
$('body').append($('<p>').text('plain text'));
showLength();
setTimeout(function(){showLength();}, 1000)
Because you are storing the old $('body > p') element on a variable, and printing the same result two times.
let length = $('body > p').length;
console.log(length);
Stores the length of the current 'body > p', it dosent exists, then is 0.
$('body').append($('<p>').text('plain text'));
console.log(length);
You append the new element, but you are printing the OLD element length value, so you get 0 again, you need to "refresh" the element.
Something like this:
let length = $('body > p').length;
console.log(length);
$('body').append($('<p>').text('plain text'));
length = $('body > p').length;
console.log(length);
setTimeout(() => console.log(length), 1000)
Using jQuery when you do something like this:
var element = $('element');
You are generating an "snapshot" of the element, it means the element is stored on the variable on the moment you declare it. If the element changes but you dont refresh the variable it will return the same values like when you declared it.
In JavaScript, variables are not re-evaluated whenever you call them. In your case, you set the value of length to 0 at the start of your script, and it will remain equal to 0 as long as you don't set it to another value with length = .... So to make your example work, you would need to do:
var length = $('body > p').length;
console.log(length);
$('body').append($('<p>').text('plain text'));
length = $('body > p').length;
console.log(length);
In your example length variable is a number which is a primitive type. In javascript primitives are immutable.
Please take a look: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Data_types
lengthin cache..lengthwill return a number which will not automatically change after adding newpelement. Use$('body > p').lengtheach time to get updated no. ofpelements.