row inside the card, not in the end of it, how to?

I wrote this code

  let cardBody = document.querySelectorAll('.card .card-body');
    let cardFooter = document.querySelectorAll('.card card-footer');
    cardBody.forEach((body, footer) => {
      let newDiv = document.createElement('div');
      newDiv.classList.add('col-md-8');
      body.parentNode.insertBefore(newDiv, body.nextSibling);
      newDiv.appendChild(body);
      newDiv.appendChild(cardFooter[footer]);
    });

    let cardImage = document.querySelectorAll('.card-header');
    cardImage.forEach((image) => {
      let newDiv = document.createElement('div');
      newDiv.classList.add('col-md-4');
      image.parentNode.insertBefore(newDiv, image.nextSibling);
      newDiv.appendChild(image);
    });
    let cardItem = document.querySelectorAll('.card');
    cardItem.forEach((item) => {
      let newDiv = document.createElement('div');
      newDiv.classList.add('row');

      item.parentNode.insertBefore(newDiv, item.nextSibling);
    });

the result is:

while the row should be inside the card to wrap cols

How to do that?