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

Question

我正在尝试学习如何向页面上的每个 div.card-row 实例添加一个新的 div.bio-wrapper(目前有 2 个 card-row 实例，但可能更多)。使用 jQuery，一个简单的 appendTo 工作正常，但我不知道如何使用 vanilla JS 执行此操作，所以任何指导将不胜感激。

编辑:建议的解决方案是只将 .bio-wrapper 添加到 .card-row 的最后一个实例，所以我在下面添加了制作 card-row 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);
  }
}

生成的 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>

Answer 1

这就是你想要的

一旦你获取了类 card-row 的所有元素，将 block 附加到它们中的每一个。

工作示例:https://jsfiddle.net/7bgqy9me/

HTML

<div id="main">

  <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>
  <div class="card-row">
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

JS

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)