Há algumas formas de adicionar um elemento/código HTML dentro, fora, antes ou depois de um elemento. Uma delas é com o método insertAdjacentHTML
. Com ele você pode usar um código HTML, sem necessidade do createElement
.
element.insertAdjacentHTML("posição", "código-html");
Para controlar onde você quer o elemento, basta adicionar um dos valores abaixo no lugar de posição
beforebegin: Antes do Elemento
afterbegin: Dentro do elemento e antes do seu primeiro filho
beforeend: Dentro do elemento e depois do seu último filho
afterend: Após o elemento
Exemplo:
var t = document.querySelector("#t");
t.insertAdjacentHTML('beforebegin', '<div class="verde"></div>');
#t{
width: 300px;
background: red;
height: 300px;
}
.verde{
background: green;
width: 30px;
height: 30px;
display: block;
}
.roxo{
background: purple;
width: 30px;
height: 30px;
display: block;
}
<div id="t">
<div class="roxo"></div>
</div>