javascript - 如何在不删除现有内容的情况下追加Child？

我试图将四个<canvas>元素附加到一个节点，appendChild（）似乎摆脱了那里已经存在的内容，所以我尝试在附加它们之前将它们全部合并起来……最好的方法是什么，我与下面我得到DOM异常8。

// Initialize Canvases
var newCanvas1 = document.createElement('canvas');
newCanvas1.setAttribute('width', 300);
newCanvas1.setAttribute('height', 300);
var newCanvas2 = newCanvas1, newCanvas3 = newCanvas1, newCanvas4 = newCanvas1;
newCanvas1.setAttribute('id', nodeID + 'canvas1');
newCanvas2.setAttribute('id', nodeID + 'canvas2');
newCanvas3.setAttribute('id', nodeID + 'canvas3');
newCanvas4.setAttribute('id', nodeID + 'canvas4');

var canvases = newCanvas1 + newCanvas2 + newCanvas3 + newCanvas4;

console.log(canvases);

node.appendChild(canvases);

最佳答案

新元素只能使用Node.cloneNode()或document.createElement()创建；其他任何事情只会创建对同一对象的另一个引用。

您可以通过编写一个简单的循环来创建元素来轻松减少代码重复：

for (var i = 1; i <= 4; ++i) {
    var canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 300;
    canvas.id = nodeID + 'canvas' + i;

    node.appendChild(canvas);
}