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.
Comment
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.
Replies
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