Javascript 将一个div附加到另一个div的每个实例

我正在尝试学习如何向页面上的每个div.card-row实例添加一个新的div.bio-wrapper（目前有两个card-row实例，但可能更多）。使用jQuery，一个简单的appendTo可以很好地工作，但是我不知道如何使用vanillaJS实现这一点，所以任何指导都将不胜感激

编辑：建议的解决方案只是将.bio wrapper添加到.card row的最后一个实例中，所以我添加了一个函数，使下面的card row div变为div，以防它影响其他内容

以下是我所拥有的：

function buildGrid() {
  const cards = $('.team-grid .card');
   for(let i = 0; i < cards.length; i+=3) {
    cards.slice(i, i+3).wrapAll('<div class="card-row"></div>');
  }
}

buildGrid();

function bioContainer() {
  // jQuery version that works
  //$('<div class="bio-wrapper"></div>').appendTo('.card-row');

  // Vanilla version that only works on the first instance of .card-row
  const block_to_insert = document.createElement('div');
  block_to_insert.className = 'bio-wrapper';

  const container_block = document.querySelectorAll('.card-row');
  // Suggested by @eugene-sunic
  for (let i = 0; i < container_block.length; i++) {
    container_block[i].appendChild(block_to_insert);
  }
}

函数buildGrid（）{
常量卡片=$（'.team grid.card'）；
对于（设i=0；i

生成的HTML应如下所示：

<div class="card-row">
  <div class="card"></div>
  <div class="card"></div>
  <div class="bio-wrapper"></div>
</div>
<div class="card-row">
  <div class="card"></div>
  <div class="card"></div>
  <div class="bio-wrapper"></div>
</div>

这就是你想要的

抓取类卡片行的所有元素后，将块附加到每个元素上

工作示例：

HTML

JS

功能生物容器（）{
const block_to_insert=document.createElement（'div'）；
block_to_insert.className='bio wrapper'；
const container_block=document.querySelectorAll（“.card行”）；
for（设i=0；i

解决方案是在for循环中创建新的bio-wrapper div，否则它只创建一个bio-wrapper实例

以下是工作循环：

let block_to_insert;
const container_block = document.querySelectorAll( '.card-row' );

for(let i = 0; i < container_block.length; i++) {
  block_to_insert = document.createElement('div');
  block_to_insert.className = 'bio-wrapper';

  container_block[i].appendChild(block_to_insert);
}

让块插入；
const container_block=document.querySelectorAll（“.card行”）；
for（设i=0；i

1）查找所有

。卡片行

。2） 循环每个

.card行

，对于每个

.card行

，创建一个新的

.bio包装器

，并附加到当前的

.card行

。

function bioContainer() {
  const block_to_insert = document.createElement('div');
  block_to_insert.className = 'bio-wrapper';

  const container_block = document.querySelectorAll('.card-row');
  for (let i = 0; i < container_block.length; i++) {
    container_block[i].appendChild(block_to_insert);
  }
}

bioContainer()
console.log(document.getElementById('main').innerHTML)

let block_to_insert;
const container_block = document.querySelectorAll( '.card-row' );

for(let i = 0; i < container_block.length; i++) {
  block_to_insert = document.createElement('div');
  block_to_insert.className = 'bio-wrapper';

  container_block[i].appendChild(block_to_insert);
}