1. Computing
Send to a Friend via Email

The Javascript DOM

6. innerHTML

clr gif

The most useful property of our web page objects that we can access is not a part of the official standard at all. The innerHTML property was introduced by Microsoft in Internet Explorer as a convenient way of being able to access the entire content of the HTML container all at once. It turned out to be so convenient that all of the other browsers quickly added support for this property.

We can use innerHTML either to retrieve the current content of the container or to insert new content into that container. Let's look at some examples. Here are a couple of div containers that we might have in our HTML.

<div id="first">
<p>Some text.</p>
<p>Some more text.</p></div>
<div id="second"></div>

The first of our example divs displays two paragraphs of text on the page while the second displays nothing on the page and is simply a placeholder.

We can retrieve the content of the first div like this:

var content = document.getElementById('first').innerHTML;

The variable content now containes all of the text from the two paragraphs as well as the paragraph tags themselves. We can now replace those paragraphs completely by assigning a new value.

document.getElementById('first').innerHTML = '<p>' +
'One paragraph of text to replace the previous two ' +
'paragraphs.<\/p>';

Of course the replacement content can be anything. We could add to the existing content instead (assuming we have already retrieved that content into a variable called 'content') like this:

document.getElementById('first').innerHTML = content +
'<p>One extra paragraph of text added to the previous two ' +
'paragraphs.<\/p>';

If we just wanted to be able to add something to the page without replacing anything that is already there we would code our HTML as we did for our second div. We can then add content into our web page after it has loaded by setting a value for the innerHTML property for that container.

Internet Explorer also provides additional properties called innerText, outerHTML, and outerText but these properties are only available for that browser and have not been copied by all of the other browsers. Their use should therefore be avoided.

©2014 About.com. All rights reserved.