Mobile version of this page
Previous:
Announcing Smurl - a free URL compressor
Next:
Misstake or hidden Nazi message?
Save this page in del.icio.usAnnouncing Smurl - a free URL compressor
Next:
Misstake or hidden Nazi message?
Related blogs
createElement('a') with a javascript hrefRelated by category
firstChild.nodeValue vs. innerHTML
firshchild, nodevalue, innerhtml, getelementbyid
10th of September 2005
I inherited some old Javascript the other day that looks something like this:
document.getElementById('msg').firstChild.nodeValue = message;
Inside the document there's a span tag that this writes to:
<span id="msg"></span>
Why use this arcane firstChild.nodeValue when you can use innerHTML??:
document.getElementById('msg').innerHTML = message;
It was not until I made this fix that the Javascript started to work in my Firefox. How could that ever have worked? All Javascript gurus out there, what am I missing?
Comment
Joerg -
17th October 2005
[«« Reply to this]
check this:
<html>
<head>
<script type="text/javascript">
function initial(){
document.getElementById("msg").innerHTML = "<div style='margin: 10px; padding: 20px;'><i>Text</i></div>";
document.getElementById("msg1").firstChild.nodeValue = "<div style='margin: 10px; padding: 20px;'><i>Text</i></div>";
}
</script>
</head>
<body onload="initial()">
<div id="msg">empty</div>
<div id="msg1">empty1</div>
<br><br><br><br>
<a target="firefox" href="http://validator.w3.org/check?uri=referer">checkme with validator...!</a>
</body>
</html>
check this:
<html>
<head>
<script type="text/javascript">
function initial(){
document.getElementById("msg").innerHTML = "<div style='margin: 10px; padding: 20px;'><i>Text</i></div>";
document.getElementById("msg1").firstChild.nodeValue = "<div style='margin: 10px; padding: 20px;'><i>Text</i></div>";
}
</script>
</head>
<body onload="initial()">
<div id="msg">empty</div>
<div id="msg1">empty1</div>
<br><br><br><br>
<a target="firefox" href="http://validator.w3.org/check?uri=referer">checkme with validator...!</a>
</body>
</html>
Peter Bengtsson -
17th October 2005
[«« Reply to this]
I see! It doesn't work.
http://www.peterbe.com/plog/firstchild.nodevalue-vs.-innerhtml/test.html
I see! It doesn't work.
http://www.peterbe.com/plog/firstchild.nodevalue-vs.-innerhtml/test.html
George -
11th July 2006
[«« Reply to this]
The answer to your initial question about how the .firstChild.nodeValue code could have ever worked with the span tag you give is that it will work in Mozilla Firefox (tested on v1.5) if there is a space inside the span tag:
<span id="msg">(space here)</span>
...otherwise Mozilla's JavaScript Console gives the error:
document.getElementById("msg").firstChild has no properties
Unfortunately, adding just a space still gives an error in IE 6 so the true answer is that needs to be added. Maybe the old code was cleaned up and some spaces or 's were removed? Without something inside the span tag, there's no text node so .firstChild.nodeValue doesn't exist.
PS I hope you don't mind me posting to something this old, but this page places very high for a Google search on ".firstChild.nodeValue" so I thought some more comments might help anyone else who stumbles across it.
The answer to your initial question about how the .firstChild.nodeValue code could have ever worked with the span tag you give is that it will work in Mozilla Firefox (tested on v1.5) if there is a space inside the span tag:
<span id="msg">(space here)</span>
...otherwise Mozilla's JavaScript Console gives the error:
document.getElementById("msg").firstChild has no properties
Unfortunately, adding just a space still gives an error in IE 6 so the true answer is that needs to be added. Maybe the old code was cleaned up and some spaces or 's were removed? Without something inside the span tag, there's no text node so .firstChild.nodeValue doesn't exist.
PS I hope you don't mind me posting to something this old, but this page places very high for a Google search on ".firstChild.nodeValue" so I thought some more comments might help anyone else who stumbles across it.
thanuja -
23rd April 2007
[«« Reply to this]
hi...
someone help me how to pass anchor text to next page using session
hi...
someone help me how to pass anchor text to next page using session
http://www.developer-x.com/content/innerhtml/default.html
Scroll down to "Arguments for and against" for the precis. But it appears to boil down to "DOM is hard to use and powerful. InnerHTML is easy to use, widely implemented but non-standard. Your call."
thanks djo. I feel compelled to go back to firstChild.nodeValue but innerHTML seems a much better solution (even though it's "wrong") because I like things simple.