title: appendChild not working onDrop to Unordered List - JavaScript
body: <p>I'm writing a code that involves dragging and dropping pictures from one div to two others. Here is the jsFiddle: <a href="https://jsfiddle.net/Yikes/rpko3996/" rel="nofollow noreferrer">https://jsfiddle.net/Yikes/rpko3996/</a>. </p>
  
  <p>The div on the furthest right, listDiv, appends whatever is dropped into realList, the ul inside it. I've coded my on drop behavior to change depending on whether the droppable is a clone or not. Droppables originating from the light grey div (the one furthest on the left) are not clones. Droppables originating from the dark grey div (the one in the middle) are clones and have to be dropped there from the light grey div (this onDrop works perfectly).</p>
  
  <p>Here's the onDrop method in question:</p>
  
  <pre><code>function dropBuild(ev){
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      if(!(document.getElementById(data).id.toString()).startsWith("n")){
          clone = document.getElementById(data).cloneNode(true);
          var num = Math.random() * (1000 - 1) + 1;
          clone.id = "newId" + num.toString();
      }
      else{
          clone = document.getElementById(data);
          clone.style.position = "absolute";
          clone.style.left = null;
          clone.style.top = null;
      }
      document.getElementById("realList").appendChild(clone);
  }
  </code></pre>
  
  <p>Does anyone know why <code>document.getElementById("realList").appendChild(clone)</code> only works properly for my if statement and not for the else statement?</p>
  
  <p>Thanks!</p>