<div class="main"></div>

section, div, p, span {
  border: 1px solid #CCC;
  padding: 2px;
  margin: 2px;
}

const arr = ['section', 'div', 'p', 'span'];
const main = document.querySelector('.main');

const tree = arr.reduceRight((acc, c) => {
  const el = document.createElement(c);
  el.innerText = `<${c}>`;
  if (acc) el.appendChild(acc);
  return el;
}, null);

main.appendChild(tree);