Как сделать элемент дочерным для другого?

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 wrapperTag = 'div';
const wrapperClass = 'block';

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

elements.forEach(n => {
  const wrapper = document.createElement(wrapperTag);
  n.replaceWith(wrapper);
  wrapper.classList.add(wrapperClass);
  wrapper.append(n);
});

или

for (const n of elements) {
  n.after(document.createElement(wrapperTag));
  n.nextSibling.className = wrapperClass;
  n.nextSibling.appendChild(n);
}

или

for (let i = 0; i < elements.length; i++) {
  const n = elements[i];
  n.outerHTML = `<${wrapperTag} class="${wrapperClass}">${n.outerHTML}</${wrapperTag}>`;
}

или

(function wrap(i, n = elements[i]) {
  if (n) {
    const wrapper = document.createElement(wrapperTag);
    n.parentNode.replaceChild(wrapper, n);
    wrapper.classList.value = wrapperClass;
    wrapper.insertAdjacentElement('afterbegin', n);
    wrap(-~i);
  }
})(0);

Comments

[MaksSmag]

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