Scripting for 5th Generation Browsers and Beyond - Part I - (6/7)

[previous][next]

Scripting for 5th Generation Browsers and Beyond

Creating Elements

Another powerful tool in the Web developer's arsenal is the document.createElement() method. This method allows developers to create tags on the fly. Essentially, you can create a whole document complete with images, text, and whatever else you can think of. However, what is essential to understand when using this method is that what occurs is the creation of a tag, but the tag itself does not have any attributes. For example:

ifrm = document.createElement("IFRAME");

creates an IFrame tag, but it does not define its src attribute or its width and height, nor does it tell it where to place the IFrame in the document body. In order to achieve all the above we can use some of the things that we have learned previously and create an IFrame from thin air complete with its attributes.

In the following script example we use: (live example)

createElement()
setAttribute()
style attributes
appendChild()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Creating an IFRAME</title>
<script language="JavaScript" type="text/javascript">
function makeFrame() {
	ifrm = document.createElement("IFRAME");
	ifrm.setAttribute("src", "https://dhtmlnirvana.com/");
	ifrm.style.width = 640+"px";
	ifrm.style.height = 480+"px";
	document.body.appendChild(ifrm);
}
</script>
</head>
<body>
<p><a href="#" onMouseDown="makeFrame()"> Let's make an iframe </a></p>
</body>
</html>

`appendChild()`

The DOM node method appendChild() is something we have not covered as yet, so let's try and understand its purpose. The purpose of this node method is to give our IFrame a place to reside in the document.

document.body.appendChild(ifrm);

If we follow the logic of the above line of script from a layman's perspective, this line translates into "find the body of the document and place the IFrame in the body." The body is actually a node within the HTML document so it is important to retrieve it, because this is where all our elements will be displayed.

Scripting for 5th Generation Browsers and Beyond - Part I - (6/7)

Scripting for 5th Generation Browsers and Beyond

Creating Elements

`appendChild()`

Contents:

Find a programming school near you