一次性插入一千个 ​＜li＞​元素到一个 ​＜ul＞​标签中

1.使用文档片段（Document Fragment）：文档片段是一种轻量级的临时容器，可以将多个元素附加到其中，然后再一次性将文档片段中的内容插入到HTML文档中。这样可以减少对DOM的操作次数，提高性能。

const ul = document.getElementById('myUl');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = 'Item ' + (i + 1);
  fragment.appendChild(li);
}

ul.appendChild(fragment);
1
2
3
4
5
6
7
8
9
10

2.使用innerHTML：使用innerHTML可以直接将HTML字符串插入到元素中，这种方法简洁明了，但需要注意在使用时确保HTML字符串的安全性。

const ul = document.getElementById('myUl');
let html = '';

for (let i = 0; i < 1000; i++) {
  html += '
Item ' + (i + 1) + '
';
}

ul.innerHTML = html;
1
2
3
4
5
6
7
8