|
Be careful with using javascript statements like
document.getElementById('yourElementId').innerHTML='newText'
on an empty html element, such as an html-div element. Since the element is empty, the browser sometimes interprets this as the element being null. That means that the innerHTML property does not exist and therefore it can not be set. Sometimes you can prevent a javascript error if the div element before the empty div does have a property innerHTML.
Examples
The following html page displays the second div, both in FF3 and IE7. It does not generate javascript errors.
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div id="first"></div>
<div id="second">y</div>
<script type="text/javascript">document.getElementById("second").innerHTML="x";</script>
</body>
</html>
The following html page does not display anything in FireFox 3 and Internet Explorer 7. It gives a javascript error in FF3 and no error in IE7:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div id="second"></div>
<script type="text/javascript">document.getElementById("second").innerHTML="x";</script>
</body>
</html>
The following html page does not display anything either in FF3 and IE7. It generates a javascript error in FF3 but not in IE7.
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div id="first"></div>
<div id="second"></div>
<script type="text/javascript">document.getElementById("second").innerHTML="x";</script>
</body>
</html>
The following html page displays both the first div and the second div, both in FF3 and IE7. It does not generate javascript errors.
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div id="first">y</div>
<div id="second"></div>
<script type="text/javascript">document.getElementById("second").innerHTML="x";</script>
</body>
</html>
|