Dynamic Content in IE
Changing HTML on the fly in IE (IE4+) is very simple. By using one or more relevant properties, we can assign new HTML or text to any containment element (such as <div> or <span>), and the page is instantly updated and reflowed to show the new content.
Here are the dynamic content properties of IE:
If you've never seen the above four properties before, distinguishing between them can undoubtedly become confusing. Here's a diagram with a sample HTML content <div id="test>, and the reach each of the four properties hold over it:
Both innerText and innerHTML represent what's contained inside the element, though the later includes its HTML makeup as well. The outer properties operate in the same manner, except that their range covers the element itself..
<div id="test"><b>This is sample HTML content</b></div>
If the four properties at this point still look like quadruplets to you, that's ok. The fact of the matter is, 99% of the time, innerHTML is all you'll be using to create dynamic content.
Dynamic content example for IE
Armed with the above new information, we can now move forward with implementing dynamic content in IE. All that's involved is setting the innerHTML property of a containment element to a new value, effectively altering what's displayed.
Here is the source code:
<div id="dcontent" style="width:100%;
background-color: #E2E2FC; padding-left: 5px"></div>
One very important thing to mention here is that the dynamic content properties of IE can only be assigned a new value after the document has completely loaded. That is why we use window.onload to activate function swapcontent().