Question

I am writing a simple accordion with just javascript.

I need to place an element before another element in the DOM. I know that I can do this with jQuery’s insertBefore, but I am unfamiliar with how to do it using just JavaScript.

Any help is appreciated.

Answer 1

The native APIs have an .insertBefore method. You pass it the element you’d like to insert, and the element you want it inserted in front of.

// Create a new textNode, get reference to container
var foo = document.createTextNode("Foo"),
    div = document.getElementById("foo");

// Insert new textNode before container's firstChild
div.insertBefore(foo, div.firstChild);

Fiddle: http://jsfiddle.net/jonathansampson/rn5pa/