How can i add class on last div with javascript it length is change dynamic

Question

<div id="block-region-side-pre"> 
     <div class="block">a</div>
     <div class="block">b</div>
     <div class="block">c</div>
     <div class="block">d</div>
</div>


 var allElems = document.querySelector("#block-region-side-pre").querySelectorAll(".block");

    for(var i=0; i< allElems.length; i++){
       allElems[i].className+=' lastblock'
    }

How can i find the last div lastblock to it. I am try to do it but it add on all div that classname is block

Answer 1

Use last-child selector and querySelector instead of querySelectorAll as you are targeting only one element.

document.querySelector("#block-region-side-pre").querySelector(".block:last-child").className += ' lastblock';

.lastblock {
  color: orange;
}

<div id="block-region-side-pre">
  <div class="block">a</div>
  <div class="block">b</div>
  <div class="block">c</div>
  <div class="block">d</div>
</div>

Edit: If elements are added dynamically and your script is being applied before elements are appended, Use css :last-child property,

The :last-child CSS pseudo-class represents any element that is the last child element of its parent.

#block-region-side-pre div:last-child {
  color: orange;
}

<div id="block-region-side-pre">
  <div class="block">a</div>
  <div class="block">b</div>
  <div class="block">c</div>
  <div class="block">d</div>
</div>

Answer 2

Try this ;)

var allElems = document.querySelector("#block-region-side-pre").querySelectorAll(".block");

for(var i=0; i< allElems.length; i++);
allElems[(i-1)].className+=' lastblock';

<div id="block-region-side-pre"> 
     <div class="block">a</div>
     <div class="block">b</div>
     <div class="block">c</div>
     <div class="block">d</div>
</div>

Answer 3

This should work:

 var allElems = document.querySelector("#block-region-side-pre").querySelectorAll(".block");

    for(var i=0; i< allElems.length; i++){
       if (i == allElems.length - 1 ) allElems[i].className+=' lastblock';
    }

<div id="block-region-side-pre"> 
     <div class="block">a</div>
     <div class="block">b</div>
     <div class="block">c</div>
     <div class="block">d</div>
</div>