Javascript innerHTML
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 setup you can now manipulate the text of an element. To start off with, let's try
changing the text inside a bold tag.
Javscript 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:
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 our knowledge from above with a text input...
Updating Text Based on User Input
By adding a Text Input we can take the
update 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.
Javscript 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:
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 display 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.
Javscript 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:
This was a pretty simple example of 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!
|