Добавление div с инпутами. По кнопке

Question

Имеется ли возможность, добавлять див с инпутами внутри? Вёрстка:

<div class="main-wrapper">
      <h2>Order content</h2>
      <div class="newCell">
        <input type="text" placeholder="sku">
        <input type="text" placeholder="name">
        <input type="number" placeholder="quantity">
      </div>
      <div class="button-plus">
        <input type="button" id="add" value="+"></input>
      </div>
    </div>

JS

function foo() {
  let wrapper = document.querySelector('.main-wrapper'),
   newDiv = document.createElement("DIV"),
   txtName = document.createTextNode(wrapper);
   newDiv.appendChild(txtName);

   wrapper.appendChild(newDiv);
 }
 let myButton = document.getElementById('add');
 myButton.addEventListener('click', foo);

Код добавляет пустые дивы c [object HTMLDivElement] (да, это вывод createTextNode, но как заставить брать нужные мне инпуты?).

Answer 1

function foo() {
  let wrapper = document.querySelector('.main-wrapper');
  let template = document.querySelector('.template');
  
  let newDiv = document.createElement("DIV");
  newDiv.innerHTML = template.innerHTML;
  wrapper.appendChild(newDiv);
}

let myButton = document.getElementById('add');
myButton.addEventListener('click', foo);
foo();

.template {
  display:none;
}

<div class="template">
  <div class="newCell">
    <input type="text" placeholder="sku"/>
    <input type="text" placeholder="name"/>
    <input type="number" placeholder="quantity"/>
  </div>
</div>

<div class="main-wrapper">
  <h2>Order content</h2>
  <div class="button-plus">
    <input type="button" id="add" value="+"/>
  </div>
  <br/>
</div>

БЛОГ НА HUSL

Добавление div с инпутами. По кнопке

Ответы (1 шт):