Question

我在这里看了几个似乎相似的问题，但我找不到答案。我试图学习如何在纯JavaScript中“拖放”。我的测试代码适用于Firefox和Chrome，但不适用于IE 10。

我在容器div中拖动两个div元素，然后点击一下按钮，我正在检查所添加的两个子项中id个属性的值。

HTML

<!DOCTYPE HTML>
<html>

<head>
    <script src="check.js"></script>
    <style type="text/css">
        #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;
        }
    </style>
    <script>
        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));
        }
    </script>
</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div class="box" id="foo" draggable="true" ondragstart="drag(event)">foo </div>
<div class="box" id="bar" draggable="true" ondragstart="drag(event)">bar </div>
<input type="button" name="check" id="check" value="Check">
</body>
</html>

的Javascript

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);
        }
    }
}

Firefox和Chrome中的输出符合我的预期：

2
[object HTMLDivElement]
[object HTMLDivElement]
foobar

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

2
undefined
undefined

我知道文本节点不能有子节点，但似乎我在这里添加div元素，所以我不明白发生了什么。我查找了.children和.childNode方法，它们都应该得到IE 9的支持，我正在使用IE 10进行测试。这可能与appendChild方法有关吗？

Answer 1

问题是，document.write它取代了当前文档，IE对它的反应比其他文件更差。

如果要在页面上显示结果 - 专用占位符（例如另一个DIV）并将输出添加到其innerHTML。

在Firefox中的Internet Explorer -works中无法获取div元素的子元素

1 个答案: