javascript - 如何在不删除已有内容的情况下追加子对象？

Question

我正在尝试附加四个 <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);

Answer 1

新元素只能通过使用 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);
}