CODEWITHSUNDEEP
javascriptdomappendchild
Dennisboys
Dennisboys

Reputation: 583

appendChild does not add a node to the end of the list of children of a specified parent node

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.net/dennisboys/BRtYb/6/

developer.mozilla.org/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.

Upvotes: 1

Views: 6245

Answers (4)

Cristi Băluță
Cristi Băluță

Reputation: 1305

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'

Upvotes: 0

xdazz
xdazz

Reputation: 160833

.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.

Upvotes: 4

the system
the system

Reputation: 9336

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

Upvotes: 0

Patrick
Patrick

Reputation: 13974

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

I believe you are looking for div.textContent

Upvotes: 1

Related Questions