如何使用循環在單擊時將克隆的html元素附加到父元素？

Question

以下javascript應該克隆HTML節點，然后使用循環將克隆附加到原始父節點50次。

現在，它只添加每次點擊附加一個克隆。 預期的行為是一次附加五十個克隆。

碼

// placeholder generators
document.querySelector(".dummy-load-home").addEventListener("click", gen)

function gen(){
const clone = document.querySelector('.card.featured').cloneNode(true);
let count = 0;
while(count < 50) {
    document.querySelector('.card.featured').parentNode.appendChild(clone);
    count++
  }
}

請注意我做錯了什么。

Answer 1

那是因為它一遍又一遍地重新附加同一個克隆。 因此即使它確實做了50次，但看起來並沒有發生任何事情。 您還需要在循環中生成新的克隆。

function gen(){
  const elementToClone = document.querySelector('.card.featured');
  let count = 0;
  while(count < 50) {
    let clone = elementToClone.cloneNode(true);
    document.querySelector('.card.featured').parentNode.appendChild(clone);
    count++;
  }
}

您可以通過緩存父節點來更優化它，這樣您就不必每次迭代循環都搜索它 -

function gen(){
  const elementToClone = document.querySelector('.card.featured'),
        parentNode = elementToClone.parentNode;

  let count = 0;     
  while(count < 50) {
    let clone = elementToClone.cloneNode(true);
    parentNode.appendChild(clone);
    count++;
  }
}

然后甚至可能更好 - 創建一個DocumentFragment並在最后附加它以便減少重新繪制（雖然TBH我不是100％的性能增益這個。從邏輯上看它似乎必須但我'我現在正在做一些研究以確認，到目前為止還沒有找到任何結論性的）

function gen(){
  const elementToClone = document.querySelector('.card.featured'),
        parentNode = elementToClone.parentNode,
        fragment = new DocumentFragment();

  let count = 0;     
  while(count < 50) {
    let clone = elementToClone.cloneNode(true);
    fragment.appendChild(clone);
    count++;
  }

  parentNode.appendChild(fragment);
}

Answer 2

使用以下功能：

    function gen(){
    let count = 0;
    while(count < 50) {
const clone = document.querySelector('.card.featured:last-child').cloneNode(true);
        document.querySelector('.card.featured').parentNode.appendChild(clone);
        count++
      }
    }

希望它有效。