如何将附加的元素最后放入容器中

Question

我正在处理一个HTML5项目。我遇到了以下问题例如：-

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

现在"appededCanvas"将附加到"div1"中。

我希望如果更多的元素（作为"div1"的孩子）添加到"div1"，那么这些元素将附加到"appededCanvas"之前。"appededCanvas"将最终保留（作为孩子）。我该怎么做？

Answer 1

使用 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);