为什么DocumentFragment会忽略一些附加节点？

Question

我正在尝试执行此代码，但我得到的结果是first third，完全忽略了中间的<b>second</b>节点。有人能说出问题所在吗？

const html = 'first <b>second</b> third ';
const span = document.createElement('span');
const frag = document.createDocumentFragment();
span.innerHTML = html;

for (let node of span.childNodes) {
	frag.appendChild(node);
}

document.body.appendChild(frag);

Answer 1

这是因为您正在改变您正在遍历的节点列表。每次从span中删除一个（通过将其附加到片段中），.childNodes都会更新并重新编制索引。

由于您要转移所有节点，因此请使用while循环，该循环只要至少有一个孩子运行，并将.firstChild附加到片段。

＆＃13;

＆＃13;

const html = 'first <b>second</b> third ';
const span = document.createElement('span');
const frag = document.createDocumentFragment();
span.innerHTML = html;

while (span.firstChild) {
  frag.appendChild(span.firstChild);
}

document.body.appendChild(frag);

＆＃13;

＆＃13;

＆＃13;

或者只使用.insertAdjacentHTML()而不是所有这些转移。

＆＃13;

＆＃13;

const html = 'first <b>second</b> third ';

document.body.insertAdjacentHTML("beforeend", html);

＆＃13;

＆＃13;

＆＃13;