要互换两个 divs而不丢失事件处理器或 DOM 引用, 您可以在 DOM 中移动它们。 关键不在于更改内部 HTML, 因为从头再创建新的 DOM 节点, 而 DOM 对象上的所有先前的事件处理器都丢失了 。

但是,如果你只是将管理部的成分移到管理部的一个新位置,那么所有事件都会被固定下来,因为管理部的元素只是重新重新定居,而不会改变管理部的元素本身。

在此设定一个快速函数, 转换 DOM 中两个元素。 只要两个元素不是另一个元素的子孙, 它应该与任何两个元素一起工作 :

function swapElements(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");
    obj1.parentNode.insertBefore(temp, obj1);

    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);

    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);

    // remove temporary marker node
    temp.parentNode.removeChild(temp);
}

您可以看到它在这里的工作 : http://jsfiddle.net/jfriend00/NThjN/

在此插入一个未插入临时元素的版本 :

function swapElements(obj1, obj2) {
    // save the location of obj2
    var parent2 = obj2.parentNode;
    var next2 = obj2.nextSibling;
    // special case for obj1 is the next sibling of obj2
    if (next2 === obj1) {
        // just put obj1 before obj2
        parent2.insertBefore(obj1, obj2);
    } else {
        // insert obj2 right before obj1
        obj1.parentNode.insertBefore(obj2, obj1);

        // now insert obj1 where obj2 was
        if (next2) {
            // if there was an element after obj2, then insert obj1 right before that
            parent2.insertBefore(obj1, next2);
        } else {
            // otherwise, just append as last child
            parent2.appendChild(obj1);
        }
    }
}

工作演示:http://jsfiddle.net/jfriend00/oq92jqrb/

这是一个简单的函数, 用于交换两个元素而不实际重新装入元素...

function swapElements(obj1, obj2) {
    obj2.nextSibling === obj1
    ? obj1.parentNode.insertBefore(obj2, obj1.nextSibling)
    : obj1.parentNode.insertBefore(obj2, obj1); 
}

Note: if the obj1 has an embedded video like YouTube, it will not reload when swapped. It s just the position of the elements that changed.

如果您跟踪两个元素的父节点和下一个秒, 您可以在没有任何临时占位符的情况下, 将两个元素与其子女交换 。

如果第二个要件是独生子女,或其父母的最后一个子女,则其替代要件(适当)附于父母一方。

function swap(a, b){
    var p1= a.parentNode, p2= b.parentNode, sib= b.nextSibling;
    if(sib=== a) sib= sib.nextSibling;
    p1.replaceChild(b, a);
    if(sib) p2.insertBefore(a, sib);
    else p2.appendChild(a);
    return true;
}

我的简单功能似乎是最短、最相容的功能。 它不需要占位符或重新装入元素或任何乱七八糟的东西 :

function swapElements(el1, el2) {
    var p2 = el2.parentNode, n2 = el2.nextSibling
    if (n2 === el1) return p2.insertBefore(el1, el2)
    el1.parentNode.insertBefore(el2, el1);
    p2.insertBefore(el1, n2);
}

由于jQuery在问题中贴上标签,

  $( #el_to_move ).appendTo( #target_parent_el );

jQuery会切开/粘贴到新地点

这样做也会有帮助:

https://api.jquery.com/detach/

考虑到O1.swapNode( o2) 长期以来在 IE 中非常有效, 这一切都非常奇怪。 在我的对象和文本节点混杂的情况下, 只有一个版本( 此处已经显示 ) :

let t = document.createElement("div");
o1.parentNode.insertBefore(t, o1);
o2.parentNode.insertBefore(o1, o2);
t.parentNode.insertBefore(o2, t);
t.parentNode.removeChild(t);

是的, 我讨厌创建临时节点, 但如果您直截了当( 没有调用功能), 上面没有此把戏的版本会失败 。 有时您不想调用函数 。

如果你们重新互换彼此相邻的元素,它就很容易了:

<div class="container">
   <div class="item">Item 1</div>
   <div class="item">Item 2</div>
</div>

$(.container.item:nth-child(2).). Infote before (.container.item:nth-child(1));

Internet Explorer is dead

All modern browsers have:

• https:// developmenter.mozilla.org/en-US/docs/Web/API/Element/ before" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element/ before

• https:// developmenter.mozilla.org/en-US/docs/Web/API/Element/after" rel=“不跟随 Noreferrer'>https://developer.mozilla.org/en-US/docs/Web/API/Element/after

el2.after( el1 );