一次性插入一千个 <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);

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;

    你可能感兴趣的:(js手写题,前端,javascript,html)