O V2,483 Points
Why index numbers of <li> do not update after DOM manipulation?
Consider the following:
<ul> <li>grapes</li> // Index 0 <li>amethyst</li> // Index 1 <li>lavender</li> // Index 2 <li>plums</li> // Index 3 </ul>
With DOM manipulation, I re-order the list items and they display correctly in the browser. <ul>
<li>lavender</li> // Index 2
<li>amethyst</li> // Index 1 <li>grapes</li> // Index 0 <li>plums</li> // Index 3 </ul>
However, when I log the firstElementChild of <ul> , I would expect the console to return <li>lavender</li>. Instead, it keeps returning <li>grapes</li>. Likewise, if I log the item using index .
Why is the index number following the list item after re-ordering the list?
How can I repopulate the list so that firstElementChild of <ul> , or index ALWAYS shows the current first item on the list after DOM manipulation.
Ryan Groom17,287 Points
O V So I believe the issue is that you are console logging a variable. As soon as your page loaded up, the value stored in the variable "firstListItem" was set to the actual value of the original first list item. Rearranging the order of the elements with the button has no tie to actually changing the value assigned to that variable. If you changed the order of list items and instead console logged listUI.firstElementChild I believe it should behave accordingly. Let me know if this works and answers your question. If not, feel free to comment back!