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上调用{p> 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>');

的 And the demo. 的

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之间有什么区别？它们并不是很相关，但我认为屏幕上的外观取决于您使用的位置。对于绝对定位，“结束”将表示“顶部”，相对意味着“右下”或“结束”

appendChild不会将节点添加到指定父节点的子节点列表的末尾

4 个答案: