Dynamic Content using innerHTML property
This is the simplest way
to modify content dynamically- using the
innerHTML property. By
using this property, supported in all modern browsers 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:
|innerHTML||The complete content (including HTML tags, if any) of an element. Supported in all browsers.|
|innerText||The complete textual content of an element. Non standard, supported in IE only.|
|textContent||Similar to the IE proprietary
|outerText||Identical to the above, except when assigning a new value to it, this value replaces the element itself as well. Non standard, supported in IE only.|
|outerHTML||The complete content of an element, including the element itself. Supported in all browsers.|
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 using innerHTML
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>
var mycontent=new Array()
i=(i==mycontent.length-1)? 0 : i+1
One very important thing to mention here is that the dynamic
content properties can only be assigned a new value after the document
has completely loaded. That is why we use
window.onload to activate