Internet Explorer bug with cloneNode()

I just spent the best part of an hour bashing my head against a keyboard because Internet Explorer wasn’t doing my JavaScript right, but Firefox and Chrome were. Turns out it was a simple solution. I had code like this:

element.innerHTML = element.innerHTML + '\n';
var clone = element.cloneNode(true);
targetElement.appendChild(clone);

But for some reason, despite the true parameter being passed to cloneNode() so it would clone children, no children would appear. Even stranger, this:

element.innerHTML = element.innerHTML + '\n';
alert(element.innerHTML);
var clone = element.cloneNode(true);
targetElement.appendChild(clone);

Alerted the element.innerHTML without its children. Turns out this line:

element.innerHTML = element.innerHTML + '\n';

Messes everything up, even in Internet Explorer 8. All I wanted to do was make the modified HTML source a little nicer, but it screwed up in the web developers nemesis.

Hopefully this helps someone else.