JSFiddle - React, Tailwind, and code Playground

HTML

<div id=elementoPai>
  <div id="fixedHeader_outer">
      <div id="fixedHeader">conteudo</div>
  </div>
<!-- quero que a HTMLString se transforme num html que apareça aqui no meio das duas -->
  <div id="pnlOpcoes_outer">
    <div id="pnlOpcoes">conteudo</div>
  </div>
</div>

JavaScript

var HTMLString = '<table id="teste"><tbody id="appender"><tr class="header"><td class="cod">Código</td> <td class="nome">Nome</td><td class="tipo">Cidade - Estado</td></tr></tbody></table><table id="teste"><tbody id="appender"><tr class="header"><td class="cod">OUTRO</td> <td class="nome">Nome</td><td class="tipo">Cidade - Estado</td></tr></tbody></table>';

var ref = document.getElementById('pnlOpcoes_outer');
var div = document.createElement('div');
div.innerHTML = HTMLString;
while(div.firstChild) {
    ref.parentElement.insertBefore(div.firstChild, ref);
}


//append??