HTML and CSS Reference
In-Depth Information
EXAMPLE
15.6 (
CONTINUED
)
<script type="text/javascript">
1
window.onload=function()
{
2
var divObj = document.getElementById("divtest");
3
alert(divObj);
4
divObj.innerHTML="Inserting new text in the
div container.";
}
</script>
</head>
<body>
5
<div id="divtest" class="divStyle">
6
Original text in div container.
</div>
</body>
</html>
EXPLANATION
1
When the page has finished loading the statements in the anonymous function are
executed.
2
The variable,
divObj
, is assigned a reference to the
div
element identified by its
id
,
divtest
.
3
By adding this
alert
, you will be able to see what was in the original
div
container be-
fore it is overwritten by the new text. After the user clicks the alert's OK button, the
new text will be displayed. If the alert box is removed, the original text will be over-
written before you can see it. The only output will be what you see in Figure 15.13.
4
The
innerHTML
property is used to change the text within the
<div></div>
tags.
5
The
id
and
class
attributes are assigned to the
<div>
tag.
6
This is the original text that is modified by JavaScript on line 4. See Figure 15.14.
Figure 15.13
The original text before it is modified.