How to add one element inside another

There are a few ways to add an HTML element / code inside, outside, before, or after an element. One is with the insertAdjacentHTML method. With it you can use HTML code, without the need of createElement .

element.insertAdjacentHTML("posição", "código-html");

To control where you want the element, simply add one of the values below instead of position

  

Beforebegin: Before Element

  

afterbegin: Inside the element and before your first child

  

beforeend: Inside the element and after your last child

  

afterend: After the

Example:

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>

Two things you did wrong:

Shortest Solution

var t = document.querySelector("#t");
t.innerHTML = '<div class="verde"></div>' + t.innerHTML;

Solution without innerHTML (usually more efficient)

var t = document.querySelector("#t");
var div = document.createElement('div');
div.className = 'verde';
t.insertBefore(div, t.firstChild);

The prependChild method does not exist, at least not natively.

You can create your own method as an extension of Element.prototype :

var t = document.querySelector("#t");
var div = document.createElement("div");
div.classList.add("verde");


//Espera receber um nó como parâmetro
Element.prototype.prependChild = function prependChild(element) {
    this.insertBefore(element,this.firstChild); 
};


t.prependChild(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>