Accessing child nodes of a div using JavaScript

Question

I have created a div using the following code...

var bannerBox = document.createElement("div");
bannerBox.id = "bannerBox";

...and a second div as follows...

var bannerAd = document.createElement("div");
bannerAd.className = "bannerAd";

The above divs have been created in one function. Now in another function I tried to access the first div as follows...

var allAds = document.getElementById("bannerBox").childNodes;

...but it produces this error: uncaught error cannot read property childnodes of null

T.J. Crowder · Accepted Answer · 2013-03-12 11:09:07Z

3

You have to actually put the bannerBox div in the document, by passing it into appendChild or insertBefore on some element that's in the document (such as document.body):

document.body.appendChild(bannerBox);

(But it can be any element in the document, doesn't have to be body.)

Once it's in the document, you can retrieve it by id the way you've shown.

And of course (this isn't the problem you're having but it could be the next problem), for bannerBox to have any child nodes (e.g., for childNodes not to be an empty NodeList), you need to put something in it. From your variable names, I'm thinking probably you'd want to put bannerAd in it, for instance:

bannerBox.appendChild(bannerAd);

answered Mar 12, 2013 at 11:09

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amber Aslam Over a year ago

i used this document.getElementsByTagName('body')[0].appendChild(bannerBox); but it produces error cannot call method appendchild of undefined

T.J. Crowder Over a year ago

@AmberAslam: If you used that from code within the head of the document, that could be why (there's no body yet). Moving the script tag containing the code into the body tag should sort it.

Collectives™ on Stack Overflow

Accessing child nodes of a div using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related