Using Placeholders to Position Divs

This is where I want the content.

This is a simple piece of JavaScript to take the content from one div and place it inside another.  You would normally hide the second div and probablt call the function when the page loads, but for the purposes of this demo, I'm showing both and am calling it on click.

Click here to see the content in the box on the right change.

First, place this in <script> tags in the head of your document, or in a separate JavaScript file:

function displayBox()
{
     if (document.getElementById("boxPosition") != null) {
         var boxContent = "";
             if (document.getElementById("boxContent").innerHTML != null) {
                 boxContent = document.getElementById("boxContent").innerHTML;
             }
         document.getElementById("boxPosition").innerHTML = boxContent;
         document.getElementById("boxContent").style.display = "None";
    }
}

Then place <div id="boxPosition"></div> where you want the content to appear. Put the content between <div id="boxContent"> and </div> and add onLoad="displayBox()" to your body tag. For this demo, I've allowed the content of the boxContent div to show, until you call the function, by clicking on the link, but if you are calling the function on load, you should hide the content with a disply:none style, to avoid it appearing briefly when the page first loads.

---

This is where the content actually is.