javascript - 如何将附加元素最后放入容器中？

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