The innerHTML property

The innerHTML property allows you to change the code that is inside an HTML element.

<body>
<div id="div_1">
What is 3+2?
</div>
<div id="div_2">
<a href="answer.html" id="the_answer">Get the answer</a>
</div>
</body>

Let’s start off by setting up two divs with ids div_1 and div_2.
div_1 contains a question and div_2 contains a link to the answer of the question.
Now we want when someone clicks the link in the div_2, the text displayed in div_1 to change.

<body>

<div id="div_1">
What is 3+2?
</div>

<div id="div_2">
<a href="answer.html" id="the_answer">Get the answer</a>
</div>

<script type="text/javascript">
var d1 = document.getElementById("div_1");
var the_link = document.getElementById("the_answer");

the_answer.onclick = function () {
	d1.innerHTML = "Easy answer ... it's 5!";
	return false;
}
</script>
</body>

Note:
The return false; statement is placed at the end in order to keep the link from being followed when clicked.

Leave a Reply