Uncaught TypeError: Cannot call method 'appendChild' of undefined #8

brycenesbitt opened this Issue Jun 26, 2012 · 6 comments


None yet
4 participants

A simple:
<script src="masonry.min.js"></script>

<script src="http://vanilla-masonry.desandro.com/masonry.min.js"></script>

Gives me
Uncaught TypeError: Cannot call method 'appendChild' of undefined
k = c.getElementsByTagName("body")[0],l = c.createElement("div"); l.style.marginTop = "1%",k.appendChild(l);

Under both Chrome and Firefox on Linux.
I've got a body tag actually.

This is Vanilla Masonry v1.0.04


desandro commented Jun 27, 2012

I was not able to reproduce this error as described on Chrome for OSX. See http://jsfiddle.net/desandro/aQuxP/ I can't imagine it would be different on Linux, but maybe that's it.

Can you provide an isolated example of this error? Help me help you see https://github.com/desandro/issues-agreement/#readme

I was also having this problem until I replaced the vanilla masonry min.js with the full masonry min.js from the demos.
Here is a fiddle with the error: http://jsfiddle.net/sprclldr/Gb5Qh/


desandro commented Jul 11, 2012

aaaah, thank you for that :)

Quick fix is to add the vanilla masonry <script> at the bottom of the page, like it is in the demos. Having in the <head> messes up getting the <body> tag.

But this is a legit bug and I'll have to work on a solution.

Note for future Dave: try out fakeBody like Modernizr has

          // After page load injecting a fake body doesn't work so check if body exists
          body = document.body,
          // IE6 and 7 won't return offsetWidth or offsetHeight unless it's in the body element, so we fake it.
          fakeBody = body ? body : document.createElement('body');

If the examples had a /* comment */ about this issue, it would go a long way. There are lots of JS edge cases with script load order, it seems safer not to mess with it and just put it at the bottom.

Your jsfiddle does not fail for me.
This, however, does:

[script src="http://vanilla-masonry.desandro.com/masonry.min.js"][/script]


@ghost ghost assigned desandro Aug 13, 2012

roshnit commented Oct 7, 2012

I am getting this same error. However, I only started to get this error after I tried to integrate it in my WordPress. Any Idea? I am using this to implement it in my code:


<script type="text/javascript"> jQuery(document).ready(function($){ $('#container').masonry({ itemSelector: 'li', }); }); </script>


wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/masonry.js', array('jquery'), '2.0.110526' );

@desandro desandro closed this in f647cd9 Oct 7, 2012


desandro commented Oct 7, 2012

Hi there. Please update to v1.0.5. This issue should be resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment