Here is my code

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

Here is my example:

/

developer.mozilla/en-US/docs/DOM/Node.appendChild, the doc says "Adds a node to the end of the list of children of a specified parent node.", but my example shows, it adds to the top of the list of children. Any idea why this happens? Thanks.

Here is my code

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

Here is my example:

http://jsfiddle/dennisboys/BRtYb/6/

developer.mozilla/en-US/docs/DOM/Node.appendChild, the doc says "Adds a node to the end of the list of children of a specified parent node.", but my example shows, it adds to the top of the list of children. Any idea why this happens? Thanks.

• javascript
• dom
• appendchild

• Uncaught TypeError: Object #<HTMLDivElement> has no method 'createTextNode' Don't you see the error? – Alvin Wong Commented Feb 1, 2013 at 2:55
• Hi Alvin, how did you get the error? w3schools./jsref/met_document_createtextnode.asp, createTextNode is a method listed in doc. – Dennisboys Commented Feb 1, 2013 at 2:56
• 1 The error can be seen on the JavaScript console. Also, better not use w3school. document.createTextNode on MDN – Alvin Wong Commented Feb 1, 2013 at 2:58
• I see no error on jsfiddle. How did you debug my code? I am new to programming and any good debugging tool to remend? Thanks. – Dennisboys Commented Feb 1, 2013 at 2:58
• For almost all browsers, press F12. – Alvin Wong Commented Feb 1, 2013 at 2:59

4 Answers 4

.createTextNode should be called on 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);

But by your example, you are using jQuery, so why not just do:

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

And the demo.

createTextNode is a document api, not a element api https://developer.mozilla/en-US/docs/DOM/document.createTextNode

I believe you are looking for div.textContent

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

or

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

What's the difference between end and top in your opinion? They are not quite related but i think the appearance on screen is depending on the position you're using. For absolute positioning 'end' will mean 'top', for relative will mean right-bottom, or 'end'