1

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

3 回答 3

2 
var newCanvas2 = newCanvas1, newCanvas3 = newCanvas1, newCanvas4 = newCanvas1;

这不会创建 4 个不同的画布对象，它所做的只是引用newCanvas2、、newCanvas3和newCanvas4newCanvas1

您需要分别创建所有 4 个：

var newCanvas1 = document.createElement('canvas'),
    newCanvas2 = document.createElement('canvas'),
    newCanvas3 = document.createElement('canvas'),
    newCanvas4 = document.createElement('canvas');

然后也分别附加它们：

node.appendChild(newCanvas1);
node.appendChild(newCanvas2);
node.appendChild(newCanvas3);
node.appendChild(newCanvas4);
于 2013-07-12T17:12:04.390 回答
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);
}
于 2013-07-12T17:17:32.267 回答
0

最终只是这样做，这是非常可重用的：

function createElement(parent, element, name, width, height){
    var newNode = document.createElement(element);
    newNode.setAttribute('width', width);
    newNode.setAttribute('height', height);
    newNode.setAttribute('id', nodeID + name);
    parent.appendChild(newNode)
}
于 2013-07-12T17:34:02.427 回答