How to appendChild without removing whats already there?

Question

I am trying to append four <canvas> elements to a node, appendChild() seems to get rid of what was already there, so i tried to combine them all before appending them... what is the best way to do this, I get DOM exception 8 with what i have below.

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

What is the node variable?

Fals
– Fals

2013-07-12 17:11:10 +00:00
Commented Jul 12, 2013 at 17:11 — Fals
– Fals, Commented Jul 12, 2013 at 17:11
@Fals <div id"something"></div>

sherlock
– sherlock

2013-07-12 17:24:58 +00:00
Commented Jul 12, 2013 at 17:24 — sherlock
– sherlock, Commented Jul 12, 2013 at 17:24

Ja͢ck · Accepted Answer · 2013-07-12 23:47:01Z

New elements can only be created by either using Node.cloneNode() or document.createElement(); anything else just creates another reference to the same object.

You can easily reduce your code duplication by writing a simple loop to create your elements:

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

Populus · Accepted Answer · 2013-07-12 17:12:04Z

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

This does not create 4 different canvas objects, all it did was reference newCanvas2, newCanvas3, and newCanvas4 to newCanvas1

You need to create all 4 separately:

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

Then append them separately too:

node.appendChild(newCanvas1); node.appendChild(newCanvas2); node.appendChild(newCanvas3); node.appendChild(newCanvas4);

sherlock · Accepted Answer · 2013-07-12 17:34:02Z

Ended up just doing this, which is quite re-usable:

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

Collectives™ on Stack Overflow

How to appendChild without removing whats already there?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related