JavaScript innerHTML (Javascript Advanced Tutorial part 2)

Ever wonder how you could change the contents of an HTML element? Maybe you'd like to replace the text in a paragraph to reflect what a visitor has just selected from a drop down box. By manipulating an element's innerHtml you'll be able to change your text and HTML as much as you like.

Changing Text with innerHTML

Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.

JavaScript Code:

<script type="text/javascript">
function changeText(){
 document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

Display:

Welcome to the site dude

You now know how to change the text in any HTML element, but what about changing the text in an element based on user input? Well, if we combine the above knowledge with a text input...

Updating Text Based on User Input

By adding a Text Input, we can take to updating our bold text with whatever the user types into the text input. Note: We updated the function a bit and set the id to boldStuff2.

JavaScript Code:

<script type="text/javascript">
function changeText2(){
 var userInput = document.getElementById('userInput').value;
 document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

Display:

Welcome to the site dude

Changing HTML with innerHTML

You can also insert HTML into your elements in the exact same way. Let's say we didn't like the text that was displayed in our paragraph and wanted to updated it with some color. The following code will take the old black text and make it bright white. The only thing we're doing different here is inserting the html element span to change the color.

JavaScript Code:

<script type="text/javascript">
function changeText3(){
 var oldHTML = document.getElementById('para').innerHTML;
 var newHTML = "<span style='color:#ffffff'>" + oldHTML + "</span>";
 document.getElementById('para').innerHTML = newHTML;
}
</script>
<p id='para'>Welcome to the site <b id='boldStuff3'>dude</b> </p> 
<input type='button' onclick='changeText3()' value='Change Text'/>

Display:

Welcome to the site dude

This was a pretty simple example for changing the HTML of an element. All we did was take the old text that was in the paragraph tag and surround it in a span tag to change the color. However, there are many more things you can do by changing an element's HTML, so don't forget this useful tool!