Later browser versions provide a set of four properties for each element that let us access what's inside an element and replace that content with new information: innerText, outerText, innerHTML, and outerHTML. Assigning new content to any of these properties replaces the contents of an element with the new content.
The innerText property allows us to change the textual content of any element. Let's explore the following h4 heading element.
<h4>Hello, World.</h4>
The following can be used as an inline event handler to assign a new string to the innerText property of our h4.
this.innerText='DHTML is Really Cool!'
The example below shows how this action can be attached to the onclick event of our h4.
<h4 onclick="this.innerText='DHTML is Really Cool!'">Hello, World.</h4>
Click the statement below to see this in action.
Hello, World!
When the onclick event occurs, the code executes, and the content of our h4 then changes to contain the new string "DHTML is Really Cool!". The innerText property replaces an element's content with a text-only string.
If we need to include HTML tags in our new content, we use the innerHTML property.
this.innerHTML="DHTML is <I>Really</I> Cool!"
Click the statement below to replace the element's content with a text string that includes HTML tags using the innerHTML property.
Hello, World!
The new string replaces the original content of our h4, and the word "Really" appears in italic.
The outerText and outerHTML properties represent the element itself, as well as the contents of the element. Using an outerText property on our h4 replaces the entire element with the assigned string. The following script causes the h4 to go away entirely, and the text string appears where the element was in the flow of the BODY's content.
this.outerText="DHTML is Really Cool!"
Click the statement below to replace both the element's content and the element itself with a text-only string using the outerText property.
Hello, World!
Much like the example above where HTML tags can be inserted with new content in our h4, the outerHTML property replaces an element's content with text strings and HTML tags. Using the outerHTML property also removes the h4 element itself.
this.outerHTML="DHTML is
<span style='width:100%; filter:glow ( color=#3cf ) '>Really Cool!</span>"
Click the statement below to replace both the element's content and the element itself with a text string that includes HTML tags using the outerHTML property.
Hello, World!
Notice the use of the this object identifier in the preceding examples. With inline event handlers, we simply use this to refer to the same object that caused the event.
The following shows a more practical example of applying the concepts discussed above. 
Show me