在开始解决 JavaScript 中的问题时,发现了一些令我感兴趣的东西。我正在开始一个只需要在屏幕上打印数字 1-100 的问题。然后我看到,在开始时,我的 for 循环
生成了一个空列表元素。
很好奇为什么会发生这种情况。
//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>
最佳答案
它与你的 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>
现在,我意识到您只是在做练习,但您的解决方案引入了一个常见的性能错误。每次更新网页内容,客户端都要"re-flow"页面上已有的所有内容和 "re-paint"包含新内容的 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>
关于javascript - 将数字 1 - 100 打印到屏幕,在 li 开头添加额外的空白列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53065374/