Question

const len = document.getElementById('parent').children.length
for (let i = 0; i < len; i++) {
	const div =  document.createElement("div"); 
	document.getElementById('parent').insertBefore(div, document.getElementById('parent').children[i])
}

<div id="parent">
  <div class="asfd"></div>
  <div class="xcbs"></div>
  <div class="msfd"></div>
  <div class="powg"></div>
  <div class="ksle"></div>
</div>

此代码返回

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="asfd"></div>
  <div class="xcbs"></div>
  <div class="msfd"></div>
  <div class="powg"></div>
  <div class="ksle"></div>
</div>

我要实现的目标是在每个当前班级之前获得一个空的div

<div id="parent">
  <div></div>
  <div class="asfd"></div>
  <div></div>
  <div class="xcbs"></div>
  <div></div>
  <div class="msfd"></div>
  <div></div>
  <div class="powg"></div>
  <div></div>
  <div class="ksle"></div>
</div>

在插入第一个空div之后，我可以理解，然后第一个空div成为第一个子[0]。有没有实现目标的解决方案？谢谢

Answer 1

要解决索引不断变化的问题，请使用querySelectorAll('#parent div')并使用for..of而不是基于索引的循环对其进行迭代：

for (const child of document.querySelectorAll('#parent div')) {
  document.getElementById('parent').insertBefore(document.createElement("div"), child);
}

#parent div[class] {
  background-color: red;
  height: 4px;
}

#parent div:not([class]) {
  background-color: yellow;
  height: 4px;
}

<div id="parent">
  <div class="asfd"></div>
  <div class="xcbs"></div>
  <div class="msfd"></div>
  <div class="powg"></div>
  <div class="ksle"></div>
</div>

Answer 2

这是因为在迭代元素时，您正在添加元素并更改了长度：

1-第一个循环，您在0处添加了div

2-第二个循环元素为0，现在为1，并在其前面添加了div

3-依此类推...

解决方案：foreach循环 （使用hr而不是div，是因为它更易于查看，无需样式）

let a = Object.assign({ b: 2, c: 3 } as const, {
  d: 0
});
a.b = 2 // err
a.d = 1 //ok

Array.from(document.getElementById('parent').children).forEach( (item, index) => {
	const div =  document.createElement("hr"); 
	document.getElementById('parent').insertBefore(div, item)
})

Answer 3

之所以会发生这种情况，是因为document.getElementById('parent').children返回了一个实时子项集合，并且document.getElementById('parent').children[i]始终是<div class="asfd"></div>，因此您必须在{{1 }}循环：

document.getElementById('parent').children

for

循环插入在每个当前DIV之前添加div之前

3 个答案: