Question

下面的一段javascript应该克隆一个HTML节点，然后使用循环将克隆附加到原始节点的父节点50次。

现在，每次点击只会添加一个克隆。预期的行为是一次添加了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++
      }
    }

希望它能起作用。

如何使用循环将克隆的html元素附加到父元素上？

2 个答案: