时间戳

首页 > 解决方案 > for循环中的克隆元素中断并永远运行

javascript - for循环中的克隆元素中断并永远运行

问题描述

我想获取所有svgs具有特定类的元素（）并将它们克隆到一个 div 中。

const images = document.getElementsByClassName('image_svg'); // collection of all elements (around 5 or so of them)
const myDiv = document.getElementsByClassName('myDiv')[0];

for (let i = 0; i < images.length; i++) {
    var clone = images[i].cloneNode(true);
    myDiv.appendChild(clone);
}

当我执行我的代码时，它会永远运行并且浏览器停止响应。我在这里做错了什么？

请注意，这是一个纯 JS 解决方案，所以请不要使用 jQuery 答案。

标签： javascriptfor-loopclone

解决方案

原因是getElementsByClassName()返回一个实时集合。

尝试Document.querySelectorAll()和Document.querySelector()

Document 方法querySelectorAll()返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。

Document 方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回 null。

const images = document.querySelectorAll('.image_svg'); // collection of all elements (around 5 or so of them)
const myDiv = document.querySelector('.myDiv');

推荐阅读