假设我<div>在一个页面上有三个元素。如何交换第一个和第三个的位置<div>？jQuery 很好。
JavaScript 在 DOM 中移动元素
IT技术
javascript
jquery
dom
2021-02-19 05:19:50
6个回答
没有必要为这样一个微不足道的任务使用库：
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]));
例如 ：-）
使用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 );
});
。之前和之后
使用现代香草 JS！比以前更好/更清洁。无需引用父项。
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");
div2.after(div1);
div2.before(div3);
支持所有现代浏览器！
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，您可以轻松地调整该功能。
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);
};
这个功能可能看起来很奇怪，但它在很大程度上依赖于标准才能正常运行。事实上，它的功能似乎比tvanfosson 发布的 jQuery 版本更好，后者似乎只进行了两次交换。
它依赖于哪些标准特性？
insertBefore 在现有子节点 refChild 之前插入节点 newChild。如果 refChild 为 null，则在子项列表的末尾插入 newChild。如果 newChild 是 DocumentFragment 对象，则其所有子项都以相同的顺序插入到 refChild 之前。如果 newChild 已经在树中，则首先将其删除。