交换两个 html 元素并在它们上保留事件侦听器

Posted 2023-05-09

【中文标题】交换两个 html 元素并在它们上保留事件侦听器

【英文标题】：Swap two html elements and preserve event listeners on them

【发布时间】：2012-05-29 19:50:36

【问题描述】：

有类似的问题，但所有的答案都是为了只为里面的内容交换html元素。

我需要交换两个 div，其中包含很多内容（表格、选择框、输入等）。 元素上有事件监听器，所以我需要在交换主 div 后保留它们。

我可以使用 jQuery 1.5。所以答案是可以的。

【参考方案1】：

要在不丢失事件处理程序或破坏 DOM 引用的情况下交换两个 div，您只需在 DOM 中移动它们即可。关键是不要更改 innerHTML，因为这会从头开始重新创建新的 DOM 节点，并且这些 DOM 对象上的所有先前事件处理程序都将丢失。

但是，如果您只是将 DOM 元素移动到 DOM 中的新位置，则所有事件都会保持关联，因为 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/

【讨论】：

我可能会补充一点，除了 2 个极端情况：交换第 n 个或第 n 个项目之外，此代码是唯一真正有效的代码。

@philk - 我不明白你认为哪些极端情况不起作用。请解释。也许显示一个 jsFiddle。

这里的工作真的很棒！性能方面，你建议做什么？

@Jessica - 你必须在两者上运行类似 jsPerf 的东西来测试性能，但我认为第二个（不创建临时元素）可能更快.

@jfriend00 谢谢！另外，我注意到您使用nextSibling 来声明next2。如果您执行nextSibling，而不是nextElementSibling，则该函数将始终仅执行第二个可能的if 选项。但是，如果您执行 nextElementSibling，则需要所有 if 语句。 （因此我假设以下方式更好）jsfiddle.net/8uyptyv0

【参考方案2】：

这是一个更简单的函数，用于交换两个元素而无需实际重新加载元素...

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

注意：如果 obj1 有像 YouTube 这样的嵌入视频，则在交换时不会重新加载。 只是元素的位置发生了变化。

【讨论】：

非常优雅，没有此处投票最多的标记 div 答案

我相信这个答案，obj2 必须在obj1 之后。如果obj1 在obj2 之前，它们将不会交换。 @jfriend00 答案将交换两个元素，无论它们是在彼此之前还是之后。

这仅在元素彼此相邻且具有相同父级的情况下才能正常工作。用几个元素将它们分开或给它们不同的父母，它不会交换它们。它只是一个前一个地移动。只需尝试this jsFiddle 并按“交换 A C”按钮。

非常优雅。对列表进行排序时效果很好

【参考方案3】：

如果您跟踪两个元素的 parentNodes 和一个的 nextSibling，您可以将两个元素与其子元素交换，而无需任何临时占位符。

如果第二个元素是唯一的子元素，或者是其父元素的最后一个子元素，则其替换（正确）附加到父元素。

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;

【参考方案4】：

我的简单函数似乎是最短和最广泛兼容的。它不需要占位符或重新加载元素或任何类似的混乱：

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

【参考方案5】：

这在一定程度上取决于您的事件如何绑定到您正在交换的元素。如果您使用的是 jQuery，那么 this 答案就是您所需要的，真的。

主要的事情不是delete或removeChildnode元素，而是将html复制粘贴到其他地方。这样做时，某些浏览器会清除所有资源（包括事件处理程序），因此绑定的事件将丢失。尽管 IE 在动态绑定事件方面因泄漏内存而臭名昭著。真的很难预测各种浏览器的行为方式。

基本上，我会说：以任何你喜欢的方式交换元素，除了复制/粘贴 HTML 字符串，并使用 jQuery 的 .live() 方法绑定你的事件。由于我认为 1.5 没有.on 方法

【讨论】：

复制，将 HTML 粘贴到其他地方将创建全新的节点，这些节点的事件处理程序与原始节点不同。所以，这行不通。

我知道，这就是我说swap elements in any way you like, except for copy/paste HTML strings的原因。我什至强调了两次。复制粘贴 HTML 是魔鬼的工作，IMO。考虑一下，在这种情况下，我建议克隆节点...

【参考方案6】：

由于 jQuery 在问题中被标记，这里有一个 jQuery 解决方案：

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

就是这样。 jQuery 会将其剪切/粘贴到新位置。

---

这也可能会有所帮助：

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

【参考方案7】：

考虑到 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);

是的，我讨厌创建临时节点，但是如果你直接使用它（没有调用函数），没有这个技巧的上述版本会失败。有时你不想调用函数。

【参考方案8】：

如果你在彼此旁边交换元素，这真的很容易：

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

$('.container .item:nth-child(2)').insertBefore('.container .item:nth-child(1)');