title: "Uncaught TypeError: Cannot call method 'appendChild' of null" occurring in script
body: <p>I have an accordion module that has quite a few moving parts. In short, it pulls in data from a Google Fusion Table and adds it to different areas of the accordion. A working example can be seen here. <a href="http://csgjusticecenter.org/code/SDWeb/accordionOld.html" rel="nofollow">http://csgjusticecenter.org/code/SDWeb/accordionOld.html</a></p>
  
  <p>For whatever reason, when I add it to my WordPress site and click on one of the headings, I get an error in Chrome saying "Uncaught TypeError: Cannot call method 'appendChild' of null." In FF, I get an error saying "TypeError: resourceCategories is null." </p>
  
  <p>This page is an example of how it doesn't work on the page: <a href="http://csgjusticecenter.org/code/SDWeb/intranetAccordion.html" rel="nofollow">http://csgjusticecenter.org/code/SDWeb/intranetAccordion.html</a>.
  If I put the accordion in an iframe (the second example on the page), it works as it should. </p>
  
  <p>The code for the working page (which is the source for the iframe) is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"&gt;        &lt;/script&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /&gt;
  &lt;link rel="stylesheet" href='http://csgjusticecenter.org/code/SDWeb/resourceAccordion.css' /&gt;
  &lt;script src="http://csgjusticecenter.org/code/SDWeb/accordionResources.js"&gt;&lt;/script&gt;
  &lt;script src="http://csgjusticecenter.org/code/SDWeb/resourceAccordion.js"&gt; &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;buildPage();&lt;/script&gt;
  &lt;div id="wrapper2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Why do I get an error when the accordion is in a Wordpress site, but not when it is added on its own?</p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>Edit:</p>
  
  <p>This is the function that is called when a div with class <code>.accordionButton</code> is clicked.</p>
  
  <pre><code>function programResources(){
  
      var query = "SELECT Category, Name, Website, Description FROM " +
          '13aGTztEz7_XOWk7U_OzelJqr3Qr2yeFxv8ntt7FP ' + "WHERE 'Category' = '" +  resourceName1 + "'";
      var encodedQuery = encodeURIComponent(query);
  
      // Construct the URL
      var url = ['https://www.googleapis.com/fusiontables/v1/query'];
      url.push('?sql=' + encodedQuery);
      url.push('&amp;key=AIzaSyD9Otr9A4pq624Ja9hRFMpUpBnyQAr06M0');
      url.push('&amp;callback=?');
  
      // Send the JSONP request using jQuery
      $.ajax({
        url: url.join(''),
        dataType: 'jsonp',
        success: function (data) {
          var rows = data['rows'];
          var resourceCategories = document.getElementById(contentDivId);
          var containerContainer = document.createElement('div');
          containerContainer.className = 'containerContainer';              
          var infoContainer = document.createElement('div');
          infoContainer.className = 'infoContainer';
          infoContainer.innerHTML = 'Click resource title to learn more';
          infoContainer.id = 'infoContainer';
  
  
          for (var i in rows) {
            var category = rows[i][0];
            var resourceName2 = rows[i][1];
            var siteUrl = rows[i][2];
            var desc = rows[i][3];
            var divID = rows[i][4];
  
  
            var resourceName = document.createElement('div');
            resourceName.className= 'resourceContainer';
            resourceName.id = resourceName2 + 'resource';
  
  
            var resourceText = document.createElement('span');
            resourceText.className='resourceText';          
            resourceText.innerHTML = resourceName2;
  
  
            resourceName.appendChild(resourceText);
            containerContainer.appendChild(resourceName);
            resourceCategories.appendChild(containerContainer);
            resourceCategories.appendChild(infoContainer);
  
  
          }
  
        }
      });
      goScroll = 0;
  };
  </code></pre>
  
  <p>The error comes up after</p>
  
  <p><code>resourceCategories.appendChild(containerContainer);</code></p>
  
  <p>Also, this function (along as a few others) is wrapped in <code>$(document).ready(function(){</code></p>