Previous
Multiple Frames 
Next
Changing Appearance of Elements using Style 
Advanced JavaScript Tutorial
DIV/SPAN

DIV/SPAN

This can be used to create the coolest effects in a website. Thats the good news. The bad news is that each browser appears to have its unique way of handling these tags. So what appears to be an extremely cool effect in your favorite browser will appear to be something very similar to green goo on other browsers. Using this a lot will give you sleepless nights - trust me - I know.

I will try to provide the best way to use this technology. The methods provided here will work on most of the browsers. But it may not work on all version of all browsers. To get more details on the difference between browsers, go to http://www.quirksmode.com/

Div Tag

Now that you are all sufficiently scared, lets try to write some text into the DIV tag. First, create the tag using the code <div id="div_tag">Hello World</div>.

Hello World

Now to change the text inside it.

document.getElementById("div_tag").innerHTML = "Hell World";

Lets create some more effects.

document.getElementById("div_tag").innerHTML = "<font color=\"#ff0f0a\">Goodbye</font>"
 + "<a href=\"http://www.google.com\">World</a>";

I don't have to tell you what you can do armed with this knowledge and a little imagination. You can redesign the whole page dynamically with this. Not recommended - but possible.

document.getElementById("div_tag") : This function will find the element in the current document with the id 'div_tag'. There are other ways to do the same thing, but for the maximum browser compact ability and for conforming to W3C standards, this one is recommended.

innerHTML : A property of the DIV or SPAN. This will hold the text and its formatting - in HTML.

More methods/properties of this will come latter. Now let us create a below effect using this technique.

 

Span

Span is a tag very similar to DIV in its properties. The difference between the two is the while the DIV is a block-level element, SPAN is an inline element. Both DIV and SPAN are grouping elements. The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.

So when do you use SPAN and when do you use DIV? Use DIV if you want do enclose lengthy contents or if the enclosed text will have HTML tags in them. Use span for enclosing very small contents.

Examples...
I accidentally shot my father-in-law while deer hunting. It was an honest mistake. I came out of the tent in the morning and thought I saw a deer in an orange vest making coffee.
Steven Wright
The above text was created with the following code... 

<style type="text/css">
div.thequote {
	border:1px dashed black;
	padding-left:50px;
	padding-right:50px;
}
span.quoter {
	padding-left:40px;
	font-style:italic;
}
</style>
<div class="thequote">I accidentally shot my father-in-law while deer hunting. 
It was an <em>honest</em> mistake.  
I came out of the tent in the morning and thought <strong>I saw a deer in an orange 
vest making coffee</strong>.<br />
<span class="quoter">Steven Wright</span></div>

If you are serious about web development, you should know these two tags very well - they have awesome powers. These tags in alliance with CSS are currently posing a great threat to the other tags. If these two tags and CSS had their way, many old and obsolete tags would die - the first to go will be the font tag. Next in line will be other tags like b(bold) - will be replaced by <strong>, i(italics) - to be replaced by <em>, etc. I have even heard reports that div is going to replace the old(and faithful) table tag in layout! These tags with some others are promising to bring about the HTML utopia - the separation of design and content.

I know that the last paragraph was off-topic - but I just wanted you to know that DIV and SPAN are tags with enormous potential and not to be taken lightly.

Now lets see a more practical use of SPAN tag.

Before marriage a man yearns for his wife.
Change

The code use to create the above effect is given below... 

<script language="javascript" type="text/javascript">
function changer() {
	document.getElementById("when").innerHTML = "After";
	document.getElementById("what").innerHTML = "earns";
}
</script>
<span id="when">Before</span> marrage a man 
<span id="what">yearns</span> for his wife.<br>
<a href="javascript:changer();">Change</a>
</pre>

In this example we changed the contents of the tag. Now let us try to change the appearance of the tag.

Previous
Multiple Frames 
Next
Changing Appearance of Elements using Style 
Contents
blog comments powered by Disqus