How to create DOM elements efficiently with JavaScript

var overElem = document.createElement("div"); overElem.id = "overlay"; var overInner = document.createElement("div"); overInner.className = "overlay__inner"; var overBox = document.createElement("div"); overBox.className = "overlay__box"; var overHdr = document.createElement("div"); overHdr.className = "overlay__hdr"; var clsBtn = document.createElement("span"); clsBtn.className = "overlay__close-btn"; var title = document.createElement("h3"); title.innerText = "The Overlay Title"; var subtitle = document.createElement("p"); subtitle.innerText = "The purpose of this overlay"; // a long while later overHdr.appendChild(clsBtn); overHdr.appendChild(title); overHdr.appendChild(subtitle); overBox.appendChild(overHdr); ...