为何循环条件设为t < childNodes.length会导致页面崩溃？

这问题我太熟了！你遇到的是无限循环导致的页面崩溃，核心原因就是你的循环条件和循环体里的操作完全冲突了，咱们一步步拆解清楚：

为什么会无限循环？ #

咱们先理清楚循环的执行逻辑：

1. 初始时，listtest.childNodes.length是一个固定值（注意：childNodes会包含元素节点+文本节点，比如<ul>里的换行、空格都会算进去，所以初始长度可能比你看到的3个<li>要多）。
2. 但每次循环里，你都通过listtest.insertBefore()往列表里插入了一个新的<a>元素——这会直接让listtest.childNodes.length每次循环都增加1。
3. 你的循环条件是t < listtest.childNodes.length，变量t每次只递增1，但length每次也跟着加1，结果就是t永远追不上length，循环会无限执行下去！浏览器一直在跑代码，内存被耗尽，最终就崩溃了。

举个直观的例子：假设初始length是7，t从0开始：

• t=0，7>0 → 执行插入，length变成8，t变成1
• t=1，8>1 → 执行插入，length变成9，t变成2
• …… 永远这样循环下去，根本停不下来

怎么解决？ #

有两种靠谱的方案，看你的需求来选：

方案1：先缓存初始的子节点长度 #

把循环开始时的childNodes.length存到一个变量里，用固定值作为循环条件，这样不管后面插入多少元素，循环次数都是固定的：

var listtest = document.getElementById("newlist"); 
// 缓存初始长度，避免每次循环读取动态变化的length
var initialChildCount = listtest.childNodes.length;
for(var t = 0; t < initialChildCount; t++) { 
  var crash = document.createElement("a"); 
  var crashtext = document.createTextNode("some random text"+t); 
  crash.appendChild(crashtext); 
  listtest.insertBefore(crash, listtest.childNodes[t]); 
}

方案2：针对元素节点操作+倒序循环（更贴合你的实际需求） #

如果你本来就是想在每个<li>前面插入<a>，那用children代替childNodes会更靠谱（children只返回元素节点，不会包含换行、空格这类文本节点），同时用倒序循环，避免插入元素打乱后续的索引：

var listtest = document.getElementById("newlist"); 
// 获取所有<li>元素节点
var listItems = listtest.children;
// 从最后一个元素往前循环
for(var t = listItems.length - 1; t >= 0; t--) { 
  var crash = document.createElement("a"); 
  var crashtext = document.createTextNode("some random text"+t); 
  crash.appendChild(crashtext); 
  // 往当前<li>前面插入新元素
  listtest.insertBefore(crash, listItems[t]); 
}

倒序循环的好处是：插入新元素只会影响当前元素后面的节点，而我们已经循环过后面的了，前面的元素索引不会被打乱，完美规避索引混乱的问题。

内容的提问来源于stack exchange，提问作者user15205190