Javascript Can'；t在Internet Explorer中获取div元素的子元素-在Firefox中工作

我在这里看了几个看起来相似的问题，但我找不到答案。我正在尝试学习如何在纯javascript中进行“拖放”。我的测试代码适用于Firefox和Chrome，但不适用于IE10

我在容器中拖动两个

div

元素

div

，然后单击按钮，检查添加的两个子元素的

id

属性值

Html

IE中的输出：子节点未定义：

2
undefined
undefined

我知道文本节点不能有子节点，但似乎我在这里添加了

div

元素，所以我不明白发生了什么。我查找了

.children

和

.childNode

方法，它们都应该受到IE9的支持，我正在用IE10进行测试。这可能与

appendChild

方法有关吗？

问题在于

文档。write

它替换当前文档，IE对它的反应比其他文档更糟

---

如果要在页面上显示结果，请指定一个占位符（例如另一个DIV）并将输出添加到其内部HTML。

如果使用

控制台.log

而不是

文档.write

，是否更好？在检查文档时修改文档似乎有问题。非常有趣，谢谢。我刚刚用IE尝试了console.log，得到了正确的响应。但最终我希望输出“foobar”进入文档，而不是控制台。为什么它在FF/Chrome中工作？

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 + "<br>");
        document.write(children[0] + "<br>");
        document.write(children[1] + "<br>");
        for (i = 0; i < children.length; i++) {
            document.write(children[i].id);
        }
    }
}

2
[object HTMLDivElement]
[object HTMLDivElement]
foobar

2
undefined
undefined