Question

I am working on a HTML5 Project.I am getting the following problem
eg:-

var appededCanvas =document.createElement('canvas');        //Canvas to append
document.getElementById("div1").appendChild(appededCanvas );// div1 is container of Canvas

Now “appededCanvas” will append inside “div1”.

I want that if more element(as child to “div1”) is adding to “div1”, then those element will append before “appededCanvas”. “appededCanvas” will remain at last (as child).
How can i do this ?

Answer 1

Use parent.insertBefore(newElement, child)

var appededCanvas =document.createElement('canvas'); 
var container = document.getElementById("div1");

container.appendChild(appededCanvas);
container.insertBefore(newElement, appendedCanvas);

// or if you want the last inserted element in the first
container.insertBefore(newElement, container.firstChild);