February 8, 2000 - Cloning Elements | WebReference

February 8, 2000 - Cloning Elements

Yehuda Shiran February 8, 2000
Cloning Elements
Tips: February 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Cloning is one of the big advantages of the DOM (Document Object Model). Instead of generating from scratch, you can duplicate existing objects, using the clone() method.

Suppose we have a board of 300 identical squares, where each square is represented as an IMG tag. We can start building the document's object hierarchy by first creating a master IMG object:

var squareNode = document.createElement("IMG");

And then by cloning it the number of times needed to fill the board:

tempSquareNode = squareNode.cloneNode();

We hook up these cloned objects to their proper father via the appendChild() method:

divNode.appendChild(tempSquareNode);

Learn how to build a DOM-Based Snakes Game in Column 46, A DOM-Based Snakes Game, Part I .