Replace Div Content On The Fly With New Content

This is a tutorial for replacing the content in a div on-the-fly, without reloading the web page. It comes with several examples.

Possible applications are:

1. A constantly updated clock or countdown timer.

2. Rotating ads - if one isn't clicked on within a minute, present a different one.

3. Displaying congratulations or "Sorry, ..." after a quiz question is answered.

4. Presenting product specifications or photographs on demand.

The content being replaced does not have to be in a div. It can be in a span, p, h3, pre, or any other container tag.

A container is an HTML tag with both an opening and a corresponding closing tag, and can contain content between the two. Thus, h1, td, and div are container tags. However, hr and br are not container tags because they do not have corresponding closing tags.

The Container Content Replacement Function

A 4-line JavaScript function does the replacement. Other JavaScript tells that function which div to target and what its new content shall be.

Here is the container content replacement JavaScript function.

<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
//--></script>

The ReplaceContentInContainer() function expects two parameters, the id of the container and the content for the container.

That function needs to be on the page for all of the examples in this article to work.

A Click To Replace The Div Content Example

Here is an example of content in a div that is replaced with a click on a link.

Here is the code that makes the above work (remember to put the four-line container content replacement JavaScript function somewhere on the page).

<div 
   id="example1div" 
   style="border-style:solid; 
          padding:10px; 
          text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div','Whew! You clicked!')">
Click me to replace the content in the container.
</a>

The div where the content is replaced has id="example1div" (all id values must be unique on the page).

The ReplaceContentInContainer() function is called with parameters 'example1div' and 'Whew! You clicked!'. The first is the id of the div that will have its content replaced. The second is the replacement content.

Replacing Div With Custom Content Example

This example replaces the content of the div with whatever you specify. You may use HTML tags and CSS definitions with your content. For security reasons, no JavaScript may be used.

Here is the code that makes the above work (remember to put the four-line container content replacement JavaScript function somewhere on the page).

<div 
   id="example2div" 
   style="border-style:solid; padding:20px;">
Replace me with something, please.
</div>

<script type="text/javascript"><!--
function EffectReplacement(it) {
re = /script/ig;
var content = it.value.replace(re,'s.c.r.i.p.t');
ReplaceContentInContainer('example2div',content);
}
//--></script>

<form style="margin:0">
<textarea 
   cols="36" 
   rows="4" 
   name="new"
   style="width:350px;" 
   onchange="EffectReplacement(this)"
   wrap="on">
</textarea><br />
<input 
   type="button" 
   value="Change Content" 
   style="width:350px;">
</form>

The div where the content is replaced has id="example2div".

When the textarea field is changed and the button clicked, the EffectReplacement() function is called.

The EffectReplacement() function looks for all instances of "script" and replaces them with "s.c.r.i.p.t" to ensure no JavaScript will run. It then calls the ReplaceContentInContainer() function with parameters 'example2div' and the content from the textarea field.

A Countdown Example

This example replaces number from 100 down to 0, one number per second. The countdown starts automatically. Upon reaching 0, "BOOM" is printed instead of the number.

If the countdown has completed before you get to this part of the article, reload the page to see the countdown.

Here is the code that makes the above work (remember to put the four-line container content replacement JavaScript function somewhere on the page).

<div 
   id="example3div" 
   style="border-style:dotted; 
          padding:10px; 
          font-size:24px; 
          width:200px; 
          text-align:center;">
Countdown
</div>

<script type="text/javascript"><!--
var containerID = "example3div";
var number = 100;
var timerID = setInterval("CountdownTimer()",1000);
function CountdownTimer() {
if(number > 1) {
	number--;
	ReplaceContentInContainer(containerID,number);
	}
else {
	clearInterval(timerID);
	ReplaceContentInContainer(containerID,'B O O M');
	}
}
//--></script>

The div where the content is replaced has id="example3div".

The JavaScript below the div specifies the container id and the number to count down from. When the page is loaded, it sets an interval for the countdown timer function. The interval is set at 1000 milliseconds.

The container id, the number to count down from, and the interval may be changed to appropriate values without adversely affecting the rest of the JavaScript.

When the page is loaded textarea field is changed and the button clicked, the EffectReplacement() function is called.

The countdown timer function subtracts 1 from the current number and calls the ReplaceContentInContainer() function. That function replaces the content of the appropriate container with the current number.

When the current number is less than 1, the word "BOOM" is used for the replacement content. That is also the point where the interval set earlier is cleared to cancel the timer.

Other Implementations

The 3 examples in this article work by sending the container id and the new content to function ReplaceContentInContainer()

Function ReplaceContentInContainer() is the workhorse.

For other implementations, have your JavaScript send the information to ReplaceContentInContainer(). The content in the container is then replaced.

UPDATE:

A reader used the "Was this article helpful to you?" comment box to ask how to replace the div content with the original content.

In response, the first article on this list shows one way to do it. The rest of the articles on the list are additional replace-div-content type of articles you may be interested in.

• Click Replaces One Div With Another
• Replace Div Content On The Fly With New Content
• Ajax to Fill Div

Will Bontrager