ドキュメントhttps://developer.mozilla.org/en-US/docs/DOM/Node.appendChildによると、appendChild は、指定された親ノードの子のリストの最後にノードを追加します。
ただし、私の例は、子を子のリストの一番上に追加することを示しています。
それはどうですか?なぜそれがドキュメントに対して起こるのか考えていますか?
ドキュメントによると、これらのコードは新しい div 要素を targetArea ノードの末尾に追加する必要があり、代わりにノードの先頭に追加します。
var targetArea = document.getElementById('nav');
var div = document.createElement('div');
var snippet = document.createTextNode('this is a new DIV');
div.appendChild(snippet);
targetArea.appendChild(div);
オンラインの私のコード: http://jsfiddle.net/dennisboys/BRtYb/6/