Recently I came across the situation where I created a webpage on which I wanted to include some raw XML data in a <textarea> so the user could see that XML data including all tags and stuff. What made the setup special was, that in this scenario I didn’t just put a predefined XML formatted data inside the textarea, but the XML data was supposed to be inserted into the webpage (into the textarea) on the client-side via Javascript.
(In order to give you a little bit more information about the whole picture: the source XML data – to be inserted on the fly – might change and should be able to be updated without reloading the whole page)

I thought easy peasy, I’ll just get the textarea element by its ID and set its innerHTML to the desired XML data:

xmltext = loadXMLText( xmldoc );
document.getElementById(targetid).innerHTML = xmltext;


This did work in IE 7 as well as in FF 3.5, but Opera (10.10 at the time) displayed a strange behavior. It rendered to content of appearing nodes (from the XML data) but replaced the node tags with spaces:

<object><name>Foobar</name>
</object>


would be rendered as (mask to see spaces):

              Foobar       
         


It took me a while (despite the use of Dragonfly, Opera’s debug tool) to figure out that the problem was not the <textarea>. Throughout my history with Opera and other browsers I gathered that if a website is viewed “incorrectly” in Opera, it usually meant that there was something wrong with the code.
I then switched to the method of adding a new node to the DOM tree, which included the text from the XML data I wanted to be inserted:

xmltext = loadXMLText( xmldoc );
textnode = document.createTextNode( xmltext );
document.getElementById(targetid).appendChild( textnode );


This now worked just fine in Opera. And so I assumed that creating a new DOM node via createTextNode() was the correct method if you wanted to insert any form of text (whether it’s source code shown as raw text or just text).

Since then I’ve googled and read a few things about innerHTML, createTextNode() and Opera. It seems that throughout its versions Opera went from supporting innerHTML (the same way other browsers did) to not supporting and to supporting again and so on.
I am usually the kind of guy who thinks “if this code is wrong, show me so I can see it’s wrong, don’t try to guess what I meant” – even though guessing what web developers meant seems to be the specialty of most browsers. But in this case we can’t really say that using innerHTML is “wrong” even though it’s not the best thing to do. One of its advantages might be speed (especially if you’d have to create a lot of new nodes), but on the other hand it’s not a standard, so we can’t blame browsers if they don’t display it the way we want it to.

So as a final note, I’d like to say that I hope people having trouble with innerHTML and Opera find this blog post so they can fix their problem.
And for those open to discussion about whether it’s bad/wrong/good/whatsoever to use innerHTML, I recommend this article which offers a nice list of ups and downs of innerHTML along with a whole bunch of scenarios and alternate ways to reach your goal without using a non-standard method ;).