|
Developers ::
JavaScript Resources ::
Use JavaScript to change contents a <DIV> tag
By Tom Fitzgerald
This is a really basic example on how to change the contents of a <DIV> tag using JavaScript. I've used this in other examples but really wanted to spell it out here so everyone knows how easy it is. Let's begin with the code below.
Line by
Line
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1">
</head>
<body>
<title>CCE's Simple Tutorial
</title>
<a href="#" onclick="ChangeText();">Click here to change the below text</a>
<div id="changeme">This is the text we want to change</div>
</body>
</html>
Ok so that is the code so far, the <DIV> tag has some text in there, now let's learn how to change it. The above link says that when the user clicks on the test to activate the ChangeText function. The below code defines that and needs to go anywhere above our <DIV> tag.
<script language="javascript">
function ChangeText() {
document.getElementById("changeme").innerHTML = "This is what we replaced it with.";
}
</script>
The ChangeText function, uses document.getElementById("changeme") creates a object so we can modify it, we just give it our id name of 'changeme'. Then we change the properties of the element innerHTML and change it to whatever text we want. Very easy.
See it in action
Contact us for more
information
|
