使用getElementsByTagName的for循环追加div子元素为何陷入无限循环？

嘿，这个问题我太清楚了！咱们来拆解一下问题根源，再给你两种靠谱的修复方案～

核心原因：动态集合在搞鬼 #

你用document.getElementsByTagName("div")获取的divsVar不是静态数组，而是动态的HTMLCollection。这个集合会实时同步DOM的变化——每当你创建一个新div并添加到DOM里，这个集合就会自动把新div纳入其中，导致divsVar.length不断变大。

你的循环条件是i < divsVar.length，而i每次只+1，可length却在不断增加，结果就是i永远追不上length，循环根本停不下来，直接陷入无限循环！

另外还要提个小笔误：你代码里写的div[i].appendChild(new_div)应该是divsVar[i].appendChild(new_div)，不然会因为找不到div变量报错哦。

两种修复方案 #

方案1：把动态集合转成静态数组 #

把HTMLCollection转换成普通数组，这样数组的长度就固定了，不受后续DOM变化影响。可以用Array.from()或者ES6的展开运算符：

function appendC() {
  // 将动态集合转为静态数组
  var divsVar = Array.from(document.getElementsByTagName("div"));
  // 也可以用展开运算符：var divsVar = [...document.getElementsByTagName("div")];
  for (var i = 0; i < divsVar.length; i++) {
    var new_div = document.createElement("div");
    divsVar[i].appendChild(new_div);
  }
}

方案2：倒序循环 #

从最后一个div开始往前处理，新添加的子div会被加到集合的末尾，不会影响我们已经处理过的元素，循环自然能正常结束：

function appendC() {
  var divsVar = document.getElementsByTagName("div");
  // 从最后一个元素开始，倒着循环
  for (var i = divsVar.length - 1; i >= 0; i--) {
    var new_div = document.createElement("div");
    divsVar[i].appendChild(new_div);
  }
}

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