Как добавить элементам обёртки?

Question

[MaksSmag]

Мне необходимо оборачивать каждый input, чтобы HTML код
<input type="button" value="Кнопка">
в браузере после выполнения скрипта имел вот такую форму

<div class="block">
    <input type="button" value="Кнопка">
</div>

Такое же возможно реализовать?

Answer 1

[0xD34F]

Кого и во что надо обернуть:

const elements = document.querySelectorAll('input[type="button"]');
const tag = 'div';
const className = 'block';

Оборачиваем:

elements.forEach(n => {
  n.after(document.createElement(tag));
  n.nextSibling.className = className;
  n.nextSibling.append(n);
});

или

for (const n of elements) {
  const wrapper = document.createElement(tag);
  wrapper.classList.add(className);
  wrapper.appendChild(n.parentNode.replaceChild(wrapper, n));
}

или

for (let i = 0; i < elements.length; i++) {
  const wrapper = document.createElement(tag);
  elements[i].replaceWith(wrapper);
  wrapper.classList.value = className;
  wrapper.insertAdjacentElement('afterbegin', elements[i]);
}

или

(function wrap(i, n = elements.item(i)) {
  if (n) {
    n.outerHTML = `<${tag} class="${className}">${n.outerHTML}</${tag}>`;
    wrap(-~i);
  }
})(0);

Comments

[MaksSmag]

оказывается так просто...