HTMLCollection Doesn't recognize after my second click

I’m making Search Box and it has histories. When clicking the histories I want to remove clicked element and add it again as a first child. However, I have a problem.

For example:
if I click on the Number 4 element firstly everything is okay.
My 4. element becomes Number 1 element and number 3 element becomes number 4 element.

But if I click Number 4 element again, it behaves 3. element clicked. Maybe for this project, I can change the method but I want to understand why there is a problem.

My Elements:

    <div id="histories">
    <div class="history-content">9</div>
    <div class="history-content">8</div>
    <div class="history-content">7</div>
    <div class="history-content">6</div>
    <div class="history-content">5</div>
    <div class="history-content">4</div>
    <div class="history-content">3</div>
    <div class="history-content">2</div>
    <div class="history-content">1</div>
    </div>

Javascript:

    // HistoryContent is my element I want to change the order.
    let HistoryContent = document.getElementsByClassName("history-content");
    //historiesID is Parent Child(container) of HistoryContent
    const historiesID = document.getElementById("histories");
                
                
    document.addEventListener("DOMContentLoaded", (event) => {
    let click = 0;
    for(let i = 0; i<HistoryContent.length; i++) {
    HistoryContent[i].addEventListener("click", function(event) {
    // Thera are somethings I don't want to click so I attached the if condition
    if(event.target !== document.getElementsByClassName("history-icon") && document.getElementsByClassName("xmark-svg")) {
    let copy = HistoryContent[i]; 
    historiesID.insertBefore(copy, historiesID.firstElementChild);
    // Debugging
    click++;
    console.log("Index number of your clicked element:",i);
    console.log("That's your",click+"th click.");
            }
          });
          }
        });

I clicked 3 times at index number 3 and Debugging:

    Index number of your clicked element: 3
    That's your 1th click.

    Index number of your clicked element: 2
    That's your 2th click.

    Index number of your clicked element: 2
    That's your 3th click.

This is not the position on the page, it is the position inside the HTML collection. The Node has been removed from the page and inserted again, as a new node, it’s added at the end of the HTML Collection

Like, you have great issues if you keep clicking the first element in the history.

1 Like

Thank you for reply. I read this article and I look last items of HTML collection after insertbefore. But it’s correctly with I seen in the history. I tried so many things about insertbefore, and I tried use another way to insertbefore. But nothing changed.

You might also give one of the insertAdjacent methods a look.


My suggestion would be to use a data structure which is what you render to the DOM and make updates to. Any changes made to the data structure, like the reordering of items, are then re-rendered to the DOM after the reordering.

1 Like

I solved the problem. the problem exists because There is an addeventlistener with DOMContentLoaded and it has a function. My code recognizes the node, only when the function(addeventlistener) is initialized. So I can’t access changes to variables on HTMLCollection.