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

Answer 4

在您看来，end 和 top 有什么区别？它们不是很相关，但我认为屏幕上的外观取决于您使用的位置。对于绝对定位，'end' 意味着'top'，对于relative 意味着右下或'end'