Strategies for rendering HTML with Javascript
try:
push rows into an array, then simply
el.innerHTML = array.join("");var frag = document.createDocumentFragment();for ( loop ) { frag.appendChild( el );}parent.appendChild( frag );
If you don't need to display all 300 records at once you could try to paginate them 30 or 50 records at a time and only unroll the JSON array as those sub-parts are required to be displayed through a pager or a local search box. Once converted you could cache the content for subsequent display as users navigate up and down the pages.
Try creating the elements in a detached DOM node or a document fragment, then attaching the whole thing in one go.