Login

Save Password - Forgot Pass? 		Not a member?
Become a DC
member now!



         Scripting for 5th Generation Browsers - Part 2
  • Creating Elements
  • CSS Dynamic Manipulation
  • Object Constructors
  • Capturing Browser Dimensions
      Rate this tutorial:
    This tutorial have been read 39972 times.

    Print-friendly version

    		•

    Scripting for 5th Generation Browsers - Part 2
    Written 07/24/2001 by Eddie Traversa. Last updated 07/28/2001.


    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 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 learnt previously and create an IFrame from thin air complete with its attributes.

    In the following script example we use:
    · 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", "http://dhtmlnirvana.com/");
	ifrm.style.width = 640+"px";
	ifrm.style.height = 480+"px";
	document.body.appendChild(ifrm);
}
</script>
</head>
<body bgcolor="#000000">
<p><a href="#" onMouseDown="makeFrame()"> Lets make an iframe </a></p>
</body>
</html>
    View example

    appendChild()
    The DOM node method appendChild() is something we have not covered as yet, so lets try and understand its purpose. The purpose of this node method is to give the 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.

    CSS Dynamic Manipulation »

    Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved.