如何在JavaScript中交换HTML元素？

Question

我使用经典的Javascript进行DOM脚本编写,我在容器DIV中有一组DIV.在儿童DIV的点击事件中,我希望导致事件的孩子DIV与它上面的DIV交换..我的代码就在这里..

 <div id="container">
        <div onclick="swapDiv(event);">1</div>
        <div onclick="swapDiv(event);">2</div>
        <div onclick="swapDiv(event);">3</div>
 </div>

如果已点击DIV 2,则应与DIV 1交换

Answer 1

此代码将执行您想要的操作(如果要将选定内容与第一个子元素交换).如果你想要别的东西,你需要更精确.

<script type="text/javascript">

function swapDiv(event,elem){
    elem.parentNode.insertBefore(elem,elem.parentNode.firstChild);
}

</script>


 <div id="container">
        <div onclick="swapDiv(event,this);">1</div>
        <div onclick="swapDiv(event,this);">2</div>
        <div onclick="swapDiv(event,this);">3</div>
 </div>

Answer 2

元素的parentNode属性为您提供其父节点.元素有一个insertBefore函数,可以在另一个引用元素之前插入一个元素(如果它已经在树中的其他地方,则移动它).节点有一个previousSibling给你前一个兄弟节点(可能是也可能不是一个元素).所以:

function swapDiv(elm) {
    var previous = findPrevious(elm);
    if (previous) {
        elm.parentNode.insertBefore(elm, previous);
    }
}

...... findPrevious看起来像这样:

function findPrevious(elm) {
   do {
       elm = elm.previousSibling;
   } while (elm && elm.nodeType != 1);
   return elm;
}

...你的onclick属性应该是:

onclick="swapDiv(this);"

...虽然您可能想要查看DOM2事件挂钩(addEventListener或attachEvent在IE上).

稍微OT,但是我可以推荐使用任何可以让您的生活更轻松的库,例如Prototype,jQuery,Closure或其他任何库.事实上,在这方面的一个早期版本的错误,因为它一直是长久以来我会直接处理的DOM.:-)

Answer 3

这适用于兄弟姐妹，应该适用于任何两个节点：

function swapElements(el1, el2) {
    let prev1 = el1.previousSibling;
    let prev2 = el2.previousSibling;

    prev1.after(el2);
    prev2.after(el1);
}

Answer 4

交换任何节点，不是兄弟姐妹，不是相邻兄弟姐妹，没有临时节点，没有克隆，没有 jquery... IE9+

function swapNodes(n1, n2) {

    var p1 = n1.parentNode;
    var p2 = n2.parentNode;
    var i1, i2;

    if ( !p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1) ) return;

    for (var i = 0; i < p1.children.length; i++) {
        if (p1.children[i].isEqualNode(n1)) {
            i1 = i;
        }
    }
    for (var i = 0; i < p2.children.length; i++) {
        if (p2.children[i].isEqualNode(n2)) {
            i2 = i;
        }
    }

    if ( p1.isEqualNode(p2) && i1 < i2 ) {
        i2++;
    }
    p1.insertBefore(n2, p1.children[i1]);
    p2.insertBefore(n1, p2.children[i2]);
}