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

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

这不会创建4个不同的画布对象，它只是引用newCanvas2，newCanvas3和newCanvas4到newCanvas1

您需要单独创建所有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);

Answer 2

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

Answer 3

结束这样做，这是非常可重复使用的：

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

如何在不删除已经存在的情况下追加儿童？

3 个答案: