How to insert an element between two elements?

Question

How to insert an element between two elements?

Navigation

#1 by (9 votes)
#2 by (4 votes)
#3 by (3 votes)

4

Explanation:

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

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

Code of my <table> as 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 the parent div and child 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>

JSFiddle Example

Question:

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

javascript html jquery dom table

asked by anonymous 19.02.2014 / 20:49

3 answers

How to align the text in front of another element? Regex to capture dimensions of a product with unit of measure

score 9 · Answer 1

In pure JavaScript you can do this:

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

This works in this case because its HTMLString only contains a loose element in 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 on jsfiddle

It also has a somewhat obscure but compatible even with very old browsers, using Element.insertAdjacentHTML (tip of Emerson Rocha Luiz):

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

Demo on jsfiddle

score 4 · Answer 2

Take the first div and insert it after it:

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

I want to participate in 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 .

score 3 · Answer 3

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

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

If you're not using jQuery, it looks 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);