Javascript HTMLCollection在访问时似乎丢失了所有其他元素

正如您在下面的代码中看到的，我有一个字符串形式的html片段，然后将其解析为文档。但是，当我遍历它并获取集合中的项时，只有其他所有项都是可访问的。还有一些行为，比如在集合中丢失一个项目，结果只剩下两个项目

JSFiddle-

有人能解释一下为什么这个实现是这样的吗

---

请注意：我了解如何实现结果（如），但我正在寻找上述代码为何以这种方式运行的解释。

答案在于

append

函数。 您可以看到，

append

（基于更标准的

appendChild

）函数添加节点并将其与当前父节点分离

见：

appendChild（）方法将一个节点添加到 指定父节点的子节点。如果给定的子对象是引用 对于文档中的现有节点，appendChild（）将其从其 将当前职位转换为新职位（不要求 在将该节点附加到其他节点之前，请从其父节点中删除该节点 节点）

现在，这些

选项

节点的当前父节点是您的

选择

节点。 现在，您的

options

变量-它可能看起来像一个数组，但实际上是一个

HTMLCollection

。同样，从以下方面：

HTMLDOM中的HTMLCollection是活动的；它会自动更新 当基础文档发生更改时

因此，在循环中，每次

append

元素时，追加的元素都会从

select

节点中删除，HTMLCollection

options

会看到这一点并变短，但由于

i

是递增的，因此会跳过一个元素

---

要亲自查看，您可以添加

调试器行代码，并在浏览器中逐行调试此代码。
答案在于
append
函数。
您可以看到，
append
（基于更标准的
appendChild
）函数添加节点并将其与当前父节点分离

见：

appendChild（）方法将一个节点添加到
指定父节点的子节点。如果给定的子对象是引用
对于文档中的现有节点，appendChild（）将其从其
将当前职位转换为新职位（不要求
在将该节点附加到其他节点之前，请从其父节点中删除该节点
节点）

现在，这些
选项
节点的当前父节点是您的
选择
节点。
现在，您的
options
变量-它可能看起来像一个数组，但实际上是一个
HTMLCollection
。同样，从以下方面：

HTMLDOM中的HTMLCollection是活动的；它会自动更新
当基础文档发生更改时

因此，在循环中，每次
append
元素时，追加的元素都会从
select
节点中删除，HTMLCollection
options
会看到这一点并变短，但由于
i
是递增的，因此会跳过一个元素

要亲自查看，您可以添加
调试器行代码，并在浏览器中逐行调试此代码。
比我快了6秒哈哈-我唯一的补充是，您可以通过克隆和追加
document.getElementById（“列表”）.appendChild（选项[I].cloneNode（true））来解决此问题
而不是将节点从HTMLCollection中拉出。比我快6秒哈哈-我唯一的补充是，你可以通过克隆和追加
document.getElementById（“list”）.appendChild（选项[I].cloneNode（true））
而不是将节点从HTMLCollection中拉出来解决这个问题。
var response = "<option value='Bobs Dock'>Bobs Dock</option><option 
value='Johns Dock'>Johns Dock</option><option value='Mikes Dock'>Mikes Dock</option><option value='Jacob Dock'>Jacob Dock</option><option value='Foo Dock'>Foo Dock</option>"

parser = new DOMParser();
doc = parser.parseFromString("<select>" + response + "</select>", "text/html");
var options = doc.getElementsByTagName("option");

for(i=0; i<options.length; i++){
    console.log(i, options.length);
    document.getElementById("list").append(options[i]);
}

index - 1 options.length - 3
index - 2 options.length - 2