将数字1 - 100打印到屏幕,在li开头添加额外的空白列表元素

Question

在JavaScript中引发了一个问题并遇到了一些让我感兴趣的东西.我开始出现一个问题,只需要将数字1-100打印到屏幕上.然后我在开始时看到我for loop生成了一个空列表元素.

很好奇为什么会这样.

//VARIABLES
let list = document.querySelector('ul');


//PRINT NUMBERS 1 - 100 TO THE SCREEN
for(i = 1; i <= 100; i++){
	let li = document.createElement('li');
  li.innerHTML = [i];
  list.appendChild(li);
}

<div class = "container_list">
  <ul>
    <li></li>
  </ul>
</div>

Answer 1

它与您的JavaScript无关.您<li>的HTML中有一个空的,硬编码的元素.去掉它.

//VARIABLES
let list = document.querySelector('ul');

//PRINT NUMBERS 1 - 100 TO THE SCREEN
for(i = 1; i <= 100; i++){
  let li = document.createElement('li');
  li.innerHTML = [i];
  list.appendChild(li);
}

<div class = "container_list">
  <ul></ul>
</div>

现在,我意识到你只是在做练习,但是你的解决方案引入了一个常见的性能错误.每次更新网页内容时,客户端都必须"重新流动"页面上已有的所有内容,并使用该新内容"重新绘制" UI.这使用资源.你做的越多,所需的资源就越多.

ul在循环的每次迭代中,您将向页面上已经添加的新子弹添加一个新的子弹,因此您将导致重新流动并使用您的代码重新绘制100次!

相反,你应该ul在内存中构建整个内容,然后当它完全构造时,你可以在循环完成时将整个内容附加一次.

最后,.innerHTML是为了获取/设置包含需要由HTML解析器解析的HTML的字符串.如果您的字符串不包含任何HTML,那将是一种浪费(在某些情况下,存在安全风险).在那些情况下使用.textContent,不参与HTML解析器.

//VARIABLES
let list = document.querySelector('ul');
let ul = document.createElement("ul");  // This will hold all the list items

//PRINT NUMBERS 1 - 100 TO THE SCREEN
for(i = 1; i <= 100; i++){
  let li = document.createElement('li');
  li.textContent = [i]; // Use .textContent when the string doesn't contain any HTML
  ul.appendChild(li);
}

// Now, append the entire list to the document with just one DOM change
document.querySelector(".container_list").appendChild(ul);

<div class = "container_list"></div>