title: Can't append nodes to empty div
body: <pre><code>&lt;div id = "first"&gt;&lt;/div&gt;
  &lt;div id = "second"&gt;&lt;/div&gt;
  &lt;div id = "third"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Trying to dynamically append to these divs within a javascript function</p>
  
  <pre><code>if (condition??) variable = "first"
  else if (condition) variable = "second"
  else variable = "third"
  
  let div = document.getElementById(variable);
  </code></pre>
  
  <p>Variable above could be first, second, or third depending on some condition.</p>
  
  <pre><code>div.appendChild(img)  
  div.appendChild(text)
  </code></pre>
  
  <p>However since div ends up being null I wont be able to append anything to it cuz of the following error.</p>
  
  <pre><code>Cannot read property 'appendChild' of null.
  </code></pre>
  
  <p>So any idea how to go around this?</p>
  
  <p>Edit: Added the actual code snip below</p>
  
  <pre><code>// my html
  &lt;div id = "list" class = "center"&gt; Listing &lt;br&gt;&lt;br&gt;
      &lt;div id = "first"&gt;&lt;/div&gt;
      &lt;div id = "second"&gt;&lt;/div&gt;
      &lt;div id = "third"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  //my js
  $.ajax({
          async: true,
          type: 'GET',                
          url: "rankings/" + boss + ".txt",
          boss : boss,
          success: function(sData){
              let temp = this.boss
              let div = document.getElementById(temp);
              //console.log(temp) logs "first" on the console
              let img = document.createElement("img");    
              let text = document.createElement('td1');
              img.src = "images/" + temp + ".jpg";
              img.alt = temp
              div.appendChild(img)  
              div.appendChild(text)
  </code></pre>
  
  <p>Edit 2: Image of code exection</p>
  
  <p><a href="https://imgur.com/a/WkYTn" rel="nofollow noreferrer">https://imgur.com/a/WkYTn</a></p>