A DOM-Based Sliding Puzzle: Building the DOM Tree

A DOM-Based Sliding Puzzle (5)

Building the DOM Tree

As you saw from the main script, building the DOM tree is based on two functions: addOneRow() and addBR(). The addOneRow() function adds one row to the puzzle:

function addOneRow() {
  for (i=0; i < 3; i++) {
    tempSquareNode = squareNode.cloneNode();
    divNode.appendChild(tempSquareNode);
  }
}

The function is based on cloning and appending. First we clone the squareNode node that we created in the main script:

tempSquareNode = squareNode.cloneNode();

Once we have a new node, tempSquareNode, we append it to the DIV containter node, divNode:

divNode.appendChild(tempSquareNode);

The function just loops three times over the above cloning-appending pair, once per a puzzle square in a row. Cloning and appending nodes is explained in detailed in Column 43.

The addBr() function is very similar to the addOneRow() function above, except that it does the cloning-appending pair just once:

function addBr() {
  tempBrNode = brNode.cloneNode();
  divNode.appendChild(tempBrNode);
}

The cloning here is after the brNode node that we created in the main script. Of course, we could have created these nodes from scratch using the createElement() function, as we created the nodes brNode and squareNode in the main script.

Produced by Yehuda Shiran and Tomer Shiran

Created: August 2, 1999
Revised: August 2, 1999

URL: https://www.webreference.com/js/column45/build.html