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);
2.使用innerHTML:使用innerHTML可以直接将HTML字符串插入到元素中,这种方法简洁明了,但需要注意在使用时确保HTML字符串的安全性。
const ul = document.getElementById('myUl');
let html = '';
for (let i = 0; i < 1000; i++) {
html += '<li>Item ' + (i + 1) + '</li>';
}
ul.innerHTML = html;