我正在使用JavaScript中的div来测试JavaScript的交集观察者api (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)。我本质上是在测试当div进入视区时,它能检测到它们有多好。我要测试的另一件事是,交集观察者api处理大量div的能力如何。目前我有30个手动复制的div,如下所示:
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
我的目标是真正推动这个测试&可能有500+ div,但是我认为必须手动输入500+ div似乎有点傻。我想知道有没有更简单的方法来实现这个数量的多个div?我在网上读过,看到有人谈到要为它写一个脚本,但没有详细说明或示例,这将是有帮助的,因为我不完全理解它是如何工作的。
发布于 2018-08-22 06:18:29
您可以使用document.createElement。
发布于 2018-08-22 06:23:04
如果你使用的是ES6,你可以这样做:
Array.from({length: 500}, (v, k) => {
const div = document.createElement('div');
const text = k + 1;
div.appendChild(document.createTextNode(text));
div.setAttribute("id", text) // this would be the tricky part...
return div
})
创建一个大小为N= 500的div数组。唯一要做的就是弄清楚如何让id
属性从数字转换为字符串。对于这个问题,有一个类似的解决方案:
发布于 2018-08-22 06:32:08
与上面的答案类似,这里有一个快速小提琴:
const wrapper = document.getElementById("wrapper");
for(let i=0; i<500;i++)
{
let el = document.createElement("div");
el.classList.add("blu");
el.innerHTML = "Div " + i;
el.setAttribute("id", i);
wrapper.appendChild(el);
}
https://stackoverflow.com/questions/51957391
复制相似问题