Как добавить кнопку в разные дивы?

Question

[Grizar]

я имею

<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Как мне после каждого дива скриптом добавить <button class="knopka" >кнопка</button>

обращаю внимание , что кнопка нужна не внутри каждого <div class="wrapper-boxes">, а после него

Answer 1

[0xD34F]

После кого и что надо добавить:

const elements = document.querySelectorAll('.wrapper-boxes');
const tag = 'button';
const text = 'click me';
const className = 'xxx';

Добавляем:

elements.forEach(n => {
  n.after(document.createElement(tag));
  n.nextSibling.textContent = text;
  n.nextSibling.classList.add(className);
});

или

for (const { parentNode, nextSibling } of elements) {
  const el = document.createElement(tag);
  parentNode.insertBefore(el, nextSibling);
  el.innerText = text;
  el.className = className;
}

или

for (let i = 0; i < elements.length; i++) {
  elements[i].insertAdjacentHTML('afterend', `<${tag} class="${className}">${text}</${tag}>`);
}

или

(function insert(i, n = elements[i]) {
  if (n) {
    const el = document.createElement(tag);
    el.appendChild(new Text(text));
    el.classList.value = className;
    n.insertAdjacentElement('afterend', el);
    insert(-~i);
  }
})(0);

Comments

[Grizar]

спасибо