1

我在 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？我在网上阅读并看到人们谈论为它编写脚本，但没有详细说明或可用的示例会有所帮助，因为我不完全理解它是如何工作的。

4

3 回答 3

0

您可以使用document.createElement。

于 2018-08-21T22:18:29.317 回答
0

如果您使用的是 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属性从数字转换为字符串。这个问题有一个类似的解决方案：
Convert digital into words with JavaScript

于 2018-08-21T22:23:04.420 回答
0

与上面的答案类似，这是一个快速的小提琴：

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://jsfiddle.net/np49zjk1/13/

于 2018-08-21T22:32:08.010 回答