Duplicate or Clone an Element

This JavaScript Reference section displays the code for an example program that shows how to duplicate an HTML element. The clone() method is used to duplicate image elements to create the map in the program below. The clone method is used with an argument value of "true" to indicate that all of the child elements should be cloned too. However, there are no child elements in this case. The clone() method is also used to duplicate the image for the man element.

The program below create a map of various terrains that are displayed via image elements. The user can move about using the w, a, s, and d keys for directional control. Be sure to click inside the map to give it focus so that it can respond to key presses.

DuplicateElements.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="DuplicateElements.js"></script>
</body>
</html>

DuplicateElements.js

var qBody = document.getElementsByTagName("body")[0];

var dImageWidth		= 50;
var dImageHeight	= 50;
// The position of the man
var iManX = 2;
var iManY = 3;

var saTerrainFiles = ["grass.png", "forrest.png", "swamp.png", "water.png", "mountains.png"];
// Allocate the image element array and fill it.
var qaTerrainElements = new Array(saTerrainFiles.length);
for (var i = 0; i < qaTerrainElements.length; ++i) {
	qImageElement					= document.createElement("img");
	qImageElement.src				= saTerrainFiles[i];
	qImageElement.style.width		= dImageWidth + "px";
	qImageElement.style.height		= dImageHeight + "px";
	qImageElement.style.position	= "absolute";
	qaTerrainElements[i]			= qImageElement;
}
var saMessages = [
	"You are in the grass.",
	"You are in the forest.",
	"You are in the swamp.",
	"You are in the water.",
	"You are in the mountains."
];

// Make the 2d array of integers for the map
var iaaMap = [	[1, 3, 4, 0, 1, 2, 0, 3],
				[2, 1, 4, 3, 4, 0, 3, 2],
				[3, 2, 1, 3, 2, 1, 2, 2],
				[1, 1, 0, 0, 1, 2, 3, 1],
				[4, 4, 3, 2, 0, 2, 4, 0],
				[2, 1, 3, 4, 4, 1, 4, 0],
				[0, 1, 2, 3, 4, 3, 2, 1]];

var iMainPadding	= 10;
var iMainBorder		= 2;
var iMainWidth		= (iaaMap[0].length*dImageWidth + 2*iMainPadding);
var iMessageHeight	= 30;
var iMainHeight		= (iMessageHeight + iaaMap.length*dImageHeight + 2*iMainPadding);

var qMainDiv					= document.createElement("div");
qMainDiv.style.backgroundColor	= "#A0D0A0";
qMainDiv.style.border			= (iMainBorder + "px solid #668666");
qMainDiv.style.width			= iMainWidth + "px";
qMainDiv.style.height			= iMainHeight + "px";
qMainDiv.style.margin			= "50px";
qMainDiv.style.left				= "0px";
qMainDiv.style.top				= "0px";
qMainDiv.style.position			= "absolute";
qBody.appendChild(qMainDiv);

var qMessageDiv						= document.createElement("div");
qMessageDiv.style.backgroundColor	= "#E0E0E0";
qMessageDiv.style.width				= (iaaMap[0].length*dImageWidth) + "px";
qMessageDiv.style.height			= iMessageHeight + "px";
qMessageDiv.style.left				= iMainPadding + "px";
qMessageDiv.style.top				= (iaaMap.length*dImageHeight + iMainPadding) + "px";
qMessageDiv.style.position			= "absolute";
qMessageDiv.innerHTML				= saMessages[iaaMap[iManY][iManX]];
qMainDiv.appendChild(qMessageDiv);


var qaaLandArray = null;
// Allocate the 2d array of the image elements
qaaLandArray = new Array(iaaMap.length);
for (var i = 0; i < iaaMap.length; ++i) {
	qaaLandArray[i] = new Array(iaaMap[i].length);
}

// Add the terrain images to the land
for (var j = 0; j < iaaMap.length; ++j) {
	for (var i = 0; i < iaaMap[j].length; ++i) {
		// Duplicate the terrain image elements for the land elements
		var qLandElement		= qaTerrainElements[iaaMap[j][i]].cloneNode(true);
		qLandElement.style.left	= ((i*dImageWidth) + iMainPadding) + "px";
		qLandElement.style.top	= ((j*dImageHeight) + iMainPadding) + "px";
		// Store the image elements in an array for access
		qaaLandArray[j][i]		= qLandElement;
		qMainDiv.appendChild(qLandElement);
	}
}

// Duplicate a terrain element, since it is an image element of the same size.
var qManElement			= qaTerrainElements[0].cloneNode(true);
qManElement.src			= "man.png";
qManElement.style.left	= ((iManX*dImageWidth) + iMainPadding) + "px";
qManElement.style.top	= ((iManY*dImageHeight) + iMainPadding) + "px";
qMainDiv.appendChild(qManElement);

document.onkeydown = function(e) {
	// The wasd key codes
	var iKeyW = 87;
	var iKeyA = 65;
	var iKeyS = 83;
	var iKeyD = 68;
	var iKeyCode = 0;
	if (e) {
		iKeyCode = e.which;
	} else {
		iKeyCode = window.event.keyCode;
	}
	switch (iKeyCode) {
		case iKeyW: {
			if (iManY > 0) {
				--iManY;
			}
			break;
		}
		case iKeyA: {
			if (iManX > 0) {
				--iManX;
			}
			break;
		}
		case iKeyS: {
			if (iManY < iaaMap.length - 1) {
				++iManY;
			}
			break;
		}
		case iKeyD: {
			if (iManX < iaaMap[iManY].length - 1) {
				++iManX;
			}
			break;
		}
		default: {
			break;
		}
	}
	qManElement.style.left	= ((iManX*dImageWidth) + iMainPadding) + "px";
	qManElement.style.top	= ((iManY*dImageHeight) + iMainPadding) + "px";
	qMessageDiv.innerHTML	= saMessages[iaaMap[iManY][iManX]];
}

Core JavaScript

Duplicate or Clone an Element

DuplicateElements.html

DuplicateElements.js

Output