javascript - appendChild は、指定された親ノードの子のリストの最後にノードを追加しません。

Question

これが私のコードです

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/

developer.mozilla.org/en-US/docs/DOM/Node.appendChild、ドキュメントには「指定された親ノードの子のリストの最後にノードを追加します。」と書かれていますが、私の例では、子供のリストのトップ。なぜこれが起こるのか分かりますか？ありがとう。

Answer 1

.createTextNodeに呼び出されるべきdocumentです。

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);

しかし、あなたの例では、jQuery を使用しているので、次のようにしないでください:

$('#nav').append('<div>this is a new DIV</div>');

そしてデモ。

Answer 2

createTextNode は要素 API ではなくドキュメント API です https://developer.mozilla.org/en-US/docs/DOM/document.createTextNode

div.textContent を探していると思います

Answer 3

document.getElementById('nav')
        .appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('this is a new DIV'));

また

document.getElementById('nav')
        .appendChild(document.createElement('div'))
        .textContent = 'this is a new DIV';