The Innerhtml Property

The innerHTML property gets its name because it allows the content of existing HTML tags to be changed by adding both html and text nodes.

Like other Dom programming methods it represents an improvement over document.write techniques.
This is because it allows the existing page elements to be manipulated.
It is easier to use than the W3C replace nodes technique because it allows several nodes and text to be inserted at once.
This is because the innerHTML property may include HTML tags or text.

Example 1 - Pick a Partner

The links below use a mouseover event to write some html and text to the box on screen.

HTML: <span onmouseover="writetodiv('divid1', 'You Picked Eddie')>Eddie</span>
    
JS:  function writetodiv(name, message) {
              document.getElementById(name).innerHTML = message;
              }

The box, 'divid1', is filled using the innerHTML property in the function writetodiv().

Example 2 - Click Counter

This use of innerHTML, counts and displays the number of times a button has been pressed.