我找到了一种有趣的方法来仅使用 jQuery 来解决这个问题：

$("#element1").before($("#element2"));

或者

$("#element1").after($("#element2"));

:)

保罗是对的，但我不确定他为什么要克隆相关元素。这并不是真正必要的，并且会丢失与元素及其后代关联的任何引用或事件侦听器。

这是一个使用普通 DOM 方法的非克隆版本（因为 jQuery 实际上没有任何特殊功能来简化此特定操作）：

function swapNodes(a, b) {
    var aparent = a.parentNode;
    var asibling = a.nextSibling === b ? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}

不，没有，但你可以掀起一个：

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};

用法：

$(selector1).swapWith(selector2);

请注意，这只适用于每个选择器仅匹配 1 个元素的情况，否则可能会产生奇怪的结果。

这个问题有很多边缘情况，它们没有被接受的答案或 bobince 的答案处理。其他涉及克隆的解决方案都在正确的轨道上，但克隆既昂贵又不必要。我们很想进行克隆，因为如何交换两个变量是一个古老的问题，其中一个步骤是将其中一个变量分配给一个临时变量。在这种情况下不需要分配（克隆）。这是一个基于 jQuery 的解决方案：

function swap(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};

对于一般情况，这些答案中的许多答案都是错误的，其他答案即使实际上有效，也会不必要地复杂化。jQuery.before和.after方法可以完成您想做的大部分事情，但是您需要像许多交换算法一样工作的第三个元素。这非常简单 - 在您四处移动时制作一个临时 DOM 元素作为占位符。不用看父母兄弟姐妹，更不用克隆……

$.fn.swapWith = function(that) {
  var $this = this;
  var $that = $(that);

  // create temporary placeholder
  var $temp = $("<div>");

  // 3-step swap
  $this.before($temp);
  $that.before($this);
  $temp.after($that).remove();

  return $this;
}

1) 把临时 div 放在temp前面this

2）移动this之前that

3）移动that之后temp

3b) 删除 temp

然后简单地

$(selectorA).swapWith(selectorB);

演示：http : //codepen.io/anon/pen/akYajE