Question

我想使用appendChild在一个简单的Web应用程序中将div元素放在前面。我听点击或mousedown（我已尝试过两者）然后重新点击已经点击的主要div容器。像这样：

的JavaScript

document.querySelector("#container").addEventListener("click", function(event) {

    for (var i = 0; i < this.children.length; i += 1) {

        if (this.children[i].contains(event.target)) {

            this.appendChild(this.children[i]);
        }
    }
});

但是，当我在Firefox中尝试此操作时，div元素中的文本字段将变得无法选择。您不能将标记放在文本字段中。它适用于Chrome，但不适用于Firefox。可能是什么原因以及如何解决？

目前，由于这个问题，我使用的是z索引的不同方法。但我更喜欢使用appendChild，因为它有其他优点。

提前致谢。

Answer 1

这是appendChild的直接结果，它暂时从DOM中删除包含被点击元素的子节点（包括单击以选择文本或将插入符号/焦点放在文本输入字段中时），将它附加在div子项的末尾（但文本选择现已消失）。

一个简单的解决方法是将点击的子项留在DOM中，但将其下面的兄弟姐妹移动到最后一个孩子的点击之前。

document.querySelector("#container").addEventListener("click", function(event) {

    var found,
        children = this.children;

    for (var i = 0; i < children.length; i += 1) {
        if (children[i].contains(event.target)) {
            //this.appendChild(children[i]); // Do not detach from DOM.
            found = children[i]; // Leave it in place.
        } else if (found) {
            this.insertBefore(children[i], found); // Swap with found sibling.
        }
    }
});

演示：https://jsfiddle.net/x53eh5b3/1/

使用appendChild置于最前面 - 无法使用文本字段（JavaScript）

1 个答案: