title: Can't get children of div element in Internet Explorer -works in Firefox
body: <p>I have looked at several questions here that seem similar but I cannot find an answer. I am trying to learn how to do "drag and drop" in pure javascript. My test code works in Firefox and Chrome but not in IE 10.</p>
  
  <p>I am dragging two <code>div</code> elements inside a container <code>div</code> and then with a button click I am checking the values of the <code>id</code> attributes of each of the two children added.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src="check.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          #div1 {
              width:350px;
              height:120px;
              padding:10px;
              margin-bottom:15px;
              border:1px solid #aaaaaa;
          }
          .box {
              display:inline;
              width:100px;
              height:30px;
              padding:10px;
              border:1px solid #aaaaaa;
          }
      &lt;/style&gt;
      &lt;script&gt;
          function allowDrop(ev) {
              ev.preventDefault();
          }
  
          function drag(ev) {
              ev.dataTransfer.setData("Text", ev.target.id);
          }
  
          function drop(ev) {
              ev.preventDefault();
              var data = ev.dataTransfer.getData("Text");
              ev.target.appendChild(document.getElementById(data));
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  &lt;div class="box" id="foo" draggable="true" ondragstart="drag(event)"&gt;foo &lt;/div&gt;
  &lt;div class="box" id="bar" draggable="true" ondragstart="drag(event)"&gt;bar &lt;/div&gt;
  &lt;input type="button" name="check" id="check" value="Check"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>window.onload = function () {
  
      var button = document.getElementById('check');
      button.addEventListener("click", handler, false);
  
      function handler() {
          var d = document.getElementById("div1");
          var children = d.childNodes;
          //var children = d.children;  tried both children and childNode : works in FF/Chrome not IE
          var i;
          document.write(children.length + "&lt;br&gt;");
          document.write(children[0] + "&lt;br&gt;");
          document.write(children[1] + "&lt;br&gt;");
          for (i = 0; i &lt; children.length; i++) {
              document.write(children[i].id);
          }
      }
  }
  </code></pre>
  
  <p>Output in Firefox and Chrome is what I expected:</p>
  
  <pre><code>2
  [object HTMLDivElement]
  [object HTMLDivElement]
  foobar
  </code></pre>
  
  <p>Output in IE: the child nodes are undefined:</p>
  
  <pre><code>2
  undefined
  undefined
  </code></pre>
  
  <p>I know that text nodes cannot have children but it seems that I am adding <code>div</code> elements here so I don't understand what is happening. I looked up the <code>.children</code> and <code>.childNode</code> methods and they are both supposed to be supported from IE 9 and I am testing with IE 10. Is it perhaps something to do with the <code>appendChild</code> method?</p>