Blog of Dave

• Example Page
• Example Code

Although it is very common to see swappable divs in web applications, it is remarkable how many times you see the innerHTML property of an element used to either insert or remove content from an element. Why is this remarkable? The innerHTML property is not part of the current HTML specification, in part due to the fact that it can render content invalid for assitive technologies that support scripting.

Even the majority of the Ajax frameworks that I have been exposed to seem to make liberal use of innerHTML. I am not suggesting in anyway that it is "wrong" to use it, and I have certainly used it on occasion, but for those interested in staying with the HTML 4.0 specs, there are other ways to accomplish the same result.

Using the DOM your document is nothing more than a series of parent/child relationships, which you can traverse through using native Javascript methods that are part of each element. For instance, say I have the following div hierarchy:

If I wanted to find out the background color of the parent div of "Child2", I could access it like this:

document.getElementById("Child2").parentNode.style.backgroundColor

You can go up or down throughout the entire hierarchy using parentNode and childNodes (array) properties. Once you get into the mindset that everything is part of a bigger whole and has its own space in the relationship, it becomes simpler to get your head around working with the DOM.

I have put together a small example showing how to create swappable divs using only the DOM and valid scripting as an example for those interested. The basic idea in this example is that we have a display div named DisplayContainer where our dynamic content will be displayed. We also have a hidden div named HoldingContainer. Within that div, we store the divs that that will be displayed in the DisplayContainer div on various onclick actions.

As we click on various items, we call a function named wwwWriteContent which accepts an object argument that is to be displayed in the content container. That method first loops through its childNodes and sends any children back to the HoldingContainer div. It does this by saying "as long as the condition exists that the DisplayContainer has a first child, send that child to the holding container and repeat". When this loop finishes, it then moves the object argument into the display container so that it is displayed.

In this code you will also see another helpful function wwwClearElement() which accepts an object argument as well. It runs a similar loop but rather than moving children to another location, it simply erases them permanently from the document.

So with that preface, let's walk through the code. In the head of our document, we are going to define the functions I described above:

// this function clears all child elements out of the object that is passed in
function wwwClearElement(obj) {
	while(obj.firstChild) obj.removeChild(obj.firstChild);
}


// this function sends any child objects back into the 'HoldingContainer' div
function wwwWriteContent(contentObject)	{
	// Here we will define our Containers
	// this is the display container
	var ContentContainer = document.getElementById("DisplayContainer");
	// this is a repository for divs not currently in the display
	var ContentHolding = document.getElementById("HoldingContainer");
	// send any children objects currently in the display to the holding div
	while(ContentContainer.firstChild) {
		ContentHolding.appendChild(ContentContainer.firstChild);
	}
	// put the active content in thd display div
	ContentContainer.appendChild(contentObject);
}

Hopefully with the inline comments and the description above, that Javascript makes sense to you at this point. Now that we have defined, we can walk through the body of the document. First, let's take a look at the HoldingContainer div.

	
Hello World
	

		
Here is a picture:
		

	

	

		
		
(kills this div until page refresh rather than putting back into the holding div)
	
		

You can see that the outer div HoldingContainer is set to "display:none". This means that it, nor any of its child nodes within can be viewed. You may also notice our suicidal div "divCLoseMe". The button within it calls our wwwClearElement() function, wiping itself off the face of the earth.

Next we create some links:

Say Hello
Smile
Self-loathing Div

You can see that each of those links call our wwwWriteConent() function and pass the object that we wish to be displayed in our DisplayContainer.

	Here is where we will show our dynamic content:
	

	

That is it! Hopefully from this you will go on and play with the childNodes array, and practice walking up and down the object heirarchy in some of your own code.