Как по onclick добавлять div с input полями?

Question

[Nikita]

Всем привет, не могу понять как по onclick добавять HTML код который есть в самом документе,
Пример, есть 3 поля, и 2 кнопки, 1 кнопка это завершить; 2я это добавить Путешественника , и вот как сделать чтобы по клику на 2ю кнопку, у меня была возможность добавить такие же поля как я сделал с основном divе?
И есть ли возможность создавать эти div*ы уникальными, чтобы с них можно было потом отдельно передавать информацию?

Вот все у меня выглядит так...

<div class="container">
       <div id="inputText">
         <button class="btn btn-info">Start Travel</button>
          <input class="form-control">
          <input class="form-control">
          <input class="form-control">
           <button onclick="f1()" class="btn btn-info">Add Traveler</button>
           <div id="out">
               
           </div>
       </div>
        
    </div>

function f1(){
   var but, out;   
  but = true;
   out = document.getElementById('out')
    
     if(but == true){
         out.innerHTML = "test"
    }
    else{
        out.innerHTML = "error"
    }
   
 }

Comments

[Иван]

Добавить код который уже есть на странице?Ищите родительский узел или сами узлы, document.clodeNode(boolean), и Node.appendChild. Всё

[Nikita]

Иван, Я прошу помочь и возможно показать, как добавить Данный DIV из разметки

[Иван]

Никита, то есть div.inputText продублировать?

Answer 1

[Иван]

<div class="container">
       <div id="inputText">
         <button class="btn btn-info">Start Travel</button>
          <input class="form-control">
          <input class="form-control">
          <input class="form-control">
           <button onclick="f1()" class="btn btn-info">Add Traveler</button>
           </div>
           <div id="out">
               
           </div>
   
    </div>

function f1(){
   
 var out = document.getElementById('out');
 var clonningEl = document.querySelector('#inputText').cloneNode(true);
out.appendChild(clonningEl);

 }