firstChild.nodeValue vs. innerHTML

10 September 2005   15 comments   Web development

Mind That Age!

This blog post is 13 years old! Most likely, its content is outdated. Especially if it's technical.

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?

Comments

djo

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."

Peter Bengtsson

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.

Joerg

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>

George

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:

&lt;span id="msg"&gt;(space here)&lt;/span&gt;

...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 &nbsp; needs to be added. Maybe the old code was cleaned up and some spaces or &nbsp;'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

hi...

someone help me how to pass anchor text to next page using session

Brazilian ICT Offshore

x = document.createTextNode('test');
document.getElementById('msg').appendChild(x);

Works both in FF and IE.

Example:
http://www.haan.net/test/demo_createTextNode.php

Cheers,
Brazilian ICT Offshore
www.haan.net

PaulnOZ

Unfortunately, innerHTML, textContent & firstChild.nodeValue don't preserve any extra white spaces in the same way that innerText does. I'm still scratch'n, so if anyone knows a way I'm all ears.

Samuel Komfi

val = msg.firstChild;
actualValue = val.data;

Anonymous

using innerHtml can cause errors in some older browsers because it's not offical.

Anonymous

screw older browsers.

dave

Good question,

For a javascript beginner like myself which would you recommend for writing form fields on the same page?

Inner HTML or FirstChild?

Thanks

Dave
www.mymoneycalculator.com.au

Chuck Kollars

There can also be a fairly large performance difference. Performance of the .firstNode.nodeValue method can be several times faster than the .innerHTML method, because assignment to firstNode.nodeValue makes no attempt to parse any potential HTML or make any DOM changes. (In fact the .firstNode.nodeValue method doesn't even notice embedded HTML, and so will misbehave if given anything more than just a simple text string).

Whether or not the performance of just this one operation significantly impacts the overall performance of the webpage, and whether or not performance is an issue at all, and whether or not this tradeoff of performance for clarity is considered a good deal, are all of course different for every situation. About all one can say is YMMV.

KEVIN MA

how come we only get the line <div style='margin: 10px; padding: 20px;'><i>Text</i></div> for document.getElementById("msg1").firstChild.nodeValue

but not

document.getElementById("msg").innerHTML

True

textContent vs innerHTML
innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead. Because the text is not parsed as HTML, it's likely to have better performance.
Moreover, this avoids an XSS attack vector!
https://developer.mozilla.org/en/docs/Web/API/Node/textContent

and http://perfectionkills.com/the-poor-misunderstood-innerText/
and http://stackoverflow.com/questions/12286975/when-working-with-text-nodes-should-i-use-the-data-nodevalue-textcontent/12287159#12287159
-> use msg.firstChild.data

Your email will never ever be published


Related posts

Previous:
Announcing Smurl - a free URL compressor 07 September 2005
Next:
Misstake or hidden Nazi message? 13 September 2005
Related by Keyword:
createElement('a') with a javascript href 21 November 2005
Related by Text:
jQuery and Highslide JS 08 January 2008
I'm back! Peterbe.com has been renewed 05 June 2005
Anti-McCain propaganda videos 12 August 2008
Ever wondered how much $87 Billion is? 04 November 2003
Guake, not Yakuake or Yeahconsole 23 January 2010