Ich habe eine Anforderung, wo ich den letzten abholen muss.div innerhalb eines Containers und wenden Sie eine Geschäftslogik darauf an. Die Auswahl der letzten.div muss dynamisch sein, da der Benutzer die Option zum Hinzufügen / Entfernen hat.div Elemente.

Anfangs habe ich es mit versuchtquerySelectorAll aber es schien nicht zu funktionieren. Also habe ich beschlossen, es zu änderngetElementsByClassName und überraschenderweise funktionierte es mit der gleichen Logik. Kann mir bitte jemand helfen, warum das so ist?remove_div funktioniert nicht, während der zweite (remove_div_2) tut?

Hinweis: Ich suche keine Lösung für das Problem, da ich bereits mit der zweiten Option fortgefahren bin. Ich möchte nur wissen, warum die Option mitquerySelectorAll funktioniert nicht

Unten ist mein Code:

HTML:

<div id='container'>
    <div id='div1' class='div'>This is Div 1</div>
    <div id='div2' class='div'>This is Div 2</div>
    <div id='div3' class='div'>This is Div 3</div>
</div>
<button type='button' id='append_div'>Append Div</button>
<button type='button' id='remove_div'>Remove Div</button>
<button type='button' id='remove_div_2'>Remove Div 2</button>

JavaScript:

window.onload = function () {
    var elementToStyle = document.querySelectorAll("#container .div");
    elementToStyle[elementToStyle.length - 1].classList.add('red');

    document.getElementById('append_div').onclick = function () {
       var divToInsert = document.createElement('div');
       divToInsert.id = 'new_div';
       divToInsert.className = 'div';
       divToInsert.innerHTML = 'This is an appended div';
       document.getElementById('container').appendChild(divToInsert);
       var elToStyle = document.querySelectorAll("#container .div");
       for (i = 0; i < elToStyle.length; i++)
           elToStyle[i].classList.remove('red');
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div').onclick = function () {
           var elToStyle = document.querySelectorAll("#container .div");
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div_2').onclick = function () {
           var elToStyle = document.getElementsByClassName('div');
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };
   }