Dynamic Content using DOM methods

1) Through the convenience property .innerHTML
property, as shown in the previous page.
2) Through a combination of DOM methods

-Method 1

Use the convenience method .innerHTML:

<div id="test">Old content</div>
<script>
//below code should be called after page has loaded
document.getElementById("test").innerHTML="new content"
</script>

-Method 2

Using purely DOM methods as proposed by W3C to simulate
.innerHTML
is a little more tricky, and for the extra work involved, may not be practical.
Nevertheless, the following elegant code is devised by Rey Nunez, a surfer of JavaScript Kit
and active helper on CodingForums. Using the below function, we can accomplish dynamic content in
Firefox using pure DOM methods:

I won't go into detail as to how the function is
constructed. Basically, document.createRange()
is first used to set up a "range" over the entire document. removeChild() is then used to clear the
contents of the specified element, and replaced with the new content,
through appendChild().
The following demonstrates using this function to create
on-the-fly HTML descriptions. Move your mouse over the links on the left: