Постоянно создавать элемент DOM с помощью класса VanillaJS obj?(.InsertAdjacentElement)

Question

Я создал новый элемент H4, который отображается в DOM, как и предполагалось.Однако проблема заключается в том, что элемент не отображается постоянно.

Щелчок другого изображения (только 2 тега изображения) внезапно добавляет элемент H4 к следующему изображению, но удаляет другое.Я оглянулся и не смог найти связанную тему.

Я ценю вашу помощь.

class Player {
    constructor() {

        // Add elements and content for clicks.
        this.addHeader = document.createElement("h4");
        this.text = document.createTextNode('The number of times you have clicked:')
        this.addHeader.appendChild(this.text);
        console.log(this.addHeader);

        // Obtain images from HTML.
        this.images = document.querySelectorAll('.cat-image');
    }

    // Update when the image is clicked.
    update() {

        for (const image of this.images) {

            let compareSrc = image.attributes.getNamedItem('src'),
                ifcontainsH4 = Array.from(image.parentElement.childNodes).includes('h4');

            image.addEventListener('click', (e) => {

                (compareSrc === compareSrc) && !ifcontainsH4
                    ? image.parentElement.insertBefore(this.addHeader, image.parentElement.children[1])
                    : console.log('Parent element contains a h4 tag.');

                e.preventDefault();
            })
        }

    }
}

// Instance of class Player.
const player = new Player();

// Loop for event listeners that are apart of a class.
(function loop() {
    player.update();
})(this)

Answer 1

this.addHeader запускается при создании Player, и каждый клик ссылается на него.Поэтому он просто перемещает один и тот же элемент h4 к каждому нажатому изображению.

Если вы хотите, чтобы новый h4 добавлялся при каждом клике, то каждый обработчик кликов должен создавать свой собственный элемент h4.