时间戳

首页 > 解决方案 > 使用 VanillaJS 类 obj 永久创建 DOM 元素？(.insertAdjacentElement)

javascript - 使用 VanillaJS 类 obj 永久创建 DOM 元素？(.insertAdjacentElement)

问题描述

我创建了一个新的 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)

标签： javascriptdom

解决方案

this.addHeader 在 Player 构建时运行，每次点击都会引用它。因此，它只是将相同的 h4 元素移动到每个单击的图像。

如果您想在每次点击时添加一个新的 h4，那么每个点击处理程序都应该创建自己的 h4 元素。

推荐阅读