Question

我对appendChild有疑问。在下面的代码中，我试图通过循环向div添加多个按钮元素，但我只得到一个按钮。我知道appendChild是如何运作的。在developers.mozilla中，据说，如果元素已经存在，它将从其父元素中删除并重新设置。所以这就是我无法向节点添加多个相同元素（按钮）的原因。

所以这是我的问题，实现它的最佳方法是什么？

function Slide() {
    this.currentStep = 0;
    this.time = 2000;
    this.images = [];

    this.images[0] = 'images/image1.jpg';
    this.images[1] = 'images/image2.jpg';
    this.images[2] = 'images/image3.jpg';
    this.images[3] = 'images/image4.jpg';
    this.images[4] = 'images/image5.jpg';

    let imagesCount = this.images.length;
    let indicatorContainer = document.createElement('div');
        indicatorContainer.classList.add('slide-indicator');
    let buttonIndicator = document.createElement('button');
        buttonIndicator.classList.add('button-indicator');
        buttonIndicator.setAttribute('type', 'button');

    for (let i = 0; i < imagesCount; i+=1) {
        indicatorContainer.appendChild(buttonIndicator);
    }

    document.querySelector('.slide').appendChild(indicatorContainer);
}

Slide.prototype.carousel = function() {     // arrow function-ov chi ashxatum ...uxxel
    document.querySelector('.image').src = this.images[this.currentStep];

    this.currentStep < this.images.length - 1 ? this.currentStep += 1 : this.currentStep = 0;

    setTimeout(this.carousel.bind(imageSlide), this.time);
};



const imageSlide = new Slide();
imageSlide.carousel();

    <div class="wrapper">
        <div class="slide">
            <img class="image" src="" width="1000" height="500" alt="image">
        </div>
        <div class="controls">
            <button class="button prev" type="button">
                previous
                <span class="arrow arrow-prev"></span>
            </button>
            <button class="button next" type="button">
                next
                <span class="arrow arrow-next"></span>
            </button>
        </div>
    </div>

Answer 1

在您的方法中，您在每个循环迭代中分配相同的buttonIndicator而不创建任何新的循环迭代。你必须要做的是在每个循环迭代中创建新按钮，使其按照你想要的方式工作。

所以这应该有效：

    for (let i = 0; i < imagesCount; i+=1) {
        let buttonIndicator = document.createElement('button');
        buttonIndicator.classList.add('button-indicator');
        buttonIndicator.setAttribute('type', 'button');
        indicatorContainer.appendChild(buttonIndicator);
    }

使用const代替let更有意义，因为您没有重新设置这些变量。

Answer 2

使用cloneNode：

indicatorContainer.appendChild(buttonIndicator.cloneNode());

javascript appendChild多个元素

2 个答案: