How to insert an element between two elements?

Question

Explanation:

I have a <div> parent containing two <div> daughters, however I would like to insert a <table> using javascript, between, that is, in the middle of these two <div> daughters who already exist in <div> father.

But mine <table> is a string that contains the HTML code as value.

Code of my <table> string:

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>';

HTML of father and daughter div:

<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>

Example in Jsfiddle

Question:

How could I do this? I would like several solutions, citing the advantages and disadvantages of them, being able to use jQuery or not

Answer 1

In pure Javascript you can do so:

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>';

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

^{Demo no jsfiddle}

This works in this case because your HTMLString only contains a loose element at the root. A more generic option:

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

^{Demo no jsfiddle}

It also has a dark option, but compatible even with very old browsers, using Element.insertAdjacentHTML (tip from Emerson Rocha Luiz):

var ref = document.getElementById('pnlOpcoes_outer');
ref.insertAdjacentHTML("beforebegin", HTMLString);

^{Demo no jsfiddle}

Answer 2

Take the first div and insert after her:

$('#fixedHeader_outer').after(HTMLString);

I want to participate in the codegolf: if you do not want to use jQuery there is this option, as short as the original:

fixedHeader_outer.outerHTML += HTMLString;

As requested, the compatibility table.

Answer 3

By the following tags you are using jQuery. So here is the solution:

$('#fixedHeader_outer').after(HTMLString);

If you’re not using jQuery, it would look like this:

var referenceNode = document.getElementById('fixedHeader_outer');
var newNode = document.createElement('table');
newNode.innerHTML = '<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>';

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);