<p>Click "Add" button to see what happens:</p>
<button id="btn-add">Add</button>
<button id="btn-rm">Remove</button>
<div id="container">
  <!-- Template
  <div>
    <span>1</span>
  </div>
  <div>
    <span>2</span>
  </div>
  -->
</div>
* {box-sizing: border-box;}
body {
  margin: 15px;
  color: #222;
  font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}

button {
  border: none;
  background-color: #0392cf;
  color: #fff;
  padding: 15px;
}

span {
  color: #fff;
  padding: 5px 10px;
  margin: 2px;
  display: inline-block;
  background-color: #fe4a49;
}
let getNodes = str => new DOMParser().parseFromString(str, 'text/html').body.childNodes;
let nodes = getNodes('<div><span>1</span></div><div><span>2</span></div>');

let container = document.querySelector("#container");
let btnAdd = document.querySelector("#btn-add");
let btnRm = document.querySelector("#btn-rm");

btnAdd.addEventListener("click", function() {
  nodes.forEach(node => container.appendChild(node.cloneNode(true)));
}); 

btnRm.addEventListener("click", function() {
  while(container.firstChild) {
    delete container.removeChild(container.firstChild);
  }
});

/*
Ref: https://davidwalsh.name/convert-html-stings-dom-nodes
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.