.before和.after

Question

假设我在页面上有三个<div>个元素。如何交换第一个和第三个<div>的位置？ jQuery很好。

Answer 1

没有必要使用库来执行这么简单的任务：

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first

这考虑到getElementsByTagName返回一个实时NodeList的事实，该NodeList会自动更新，以反映DOM操作时元素的顺序。

你也可以使用：

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first

如果你想尝试一下，还有其他各种可能的排列：

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));

例如： - ）

Answer 2

jQuery

的琐事

$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

如果你想重复这样做，你需要使用不同的选择器，因为div会在移动时保留它们的ID。

$(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});

Answer 3

jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
};

并像这样使用它：

$('#div1').swap('#div2');

如果你不想使用jQuery，你可以很容易地调整这个功能。

Answer 4

.before和.after

使用现代香草JS！比以前更好/更清洁的方式。无需引用父母。

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

Browser Support - 截至19年6月，全球占90％

Answer 5

var swap = function () {
    var divs = document.getElementsByTagName('div');
    var div1 = divs[0];
    var div2 = divs[1];
    var div3 = divs[2];

    div3.parentNode.insertBefore(div1, div3);
    div1.parentNode.insertBefore(div3, div2);
};

这个功能可能看起来很奇怪，但它很大程度上依赖于标准才能正常运行。实际上，它看起来似乎比the jQuery version that tvanfosson posted更好，它似乎只进行了两次交换。

它依赖什么标准特性？

的insertBefore 在现有子节点refChild之前插入节点newChild。如果 refChild为null，插入newChild 孩子名单的结尾。如果newChild是DocumentFragment对象，则其所有子对象都是之前以相同的顺序插入 refChild。 如果newChild已经存在在树中，它首先被删除。

Answer 6

顶部提到的Jquery方法将起作用。您也可以使用JQuery和CSS .Say，例如在Div上你已经应用了class1和div2你已经应用了class class2（比如每个css类提供了在浏览器上的特定位置），现在你可以使用jquery或者交换类了javascript（将改变立场）

Answer 7

很抱歉碰到这个帖子我偶然发现了“交换DOM元素”问题并且玩了一下

结果是一个jQuery原生的“解决方案”，看起来非常漂亮（不幸的是我不知道在执行此操作时jQuery内部发生了什么）

守则：

$('#element1').insertAfter($('#element2'));

jQuery文档说insertAfter() 移动元素并且不克隆它

DOM中的JavaScript移动元素

7 个答案:

.before和.after