<div>한 페이지에 세 가지 요소 가 있다고 가정 해 보겠습니다 . 첫 번째와 세 번째 위치를 바꾸려면 어떻게 <div>해야합니까? jQuery는 괜찮습니다.

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

이러한 사소한 작업을 위해 라이브러리를 사용할 필요가 없습니다.

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

이는 getElementsByTagNameDOM 요소가 조작 될 때 요소의 순서를 반영하도록 자동으로 업데이트되는 라이브 NodeList 를 반환 한다는 사실을 고려합니다 .

다음을 사용할 수도 있습니다.

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

예 :-)

.이전과 이후

현대적인 바닐라 JS를 사용하십시오! 이전보다 훨씬 좋고 / 깨끗합니다. 부모를 참조 할 필요가 없습니다.

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

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

브라우저 지원 -'20 년 7 월 현재 전 세계 94.23 %

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가 이미 트리에 있으면 먼저 제거됩니다.

위에 언급 된 Jquery 접근 방식이 작동합니다. JQuery 및 CSS를 사용할 수도 있습니다. 예를 들어 Div 1에서 class1 및 div2를 적용한 경우 class2 클래스를 적용했습니다 (예 : css의 각 클래스가 브라우저에서 특정 위치를 제공하는 경우). 이제 jquery를 사용하여 클래스를 교환 할 수 있습니다. javascript (위치가 변경됨)

이 스레드를 부딪쳐서 미안합니다. "Swap DOM-elements"문제를 우연히 발견하고 약간 놀았습니다.

결과는 정말 예쁜 것처럼 보이는 jQuery 네이티브 "솔루션"입니다 (불행히도이 작업을 수행 할 때 jQuery 내부에서 무슨 일이 일어나는지 모르겠습니다).

코드:

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

jQuery 문서는 요소 를 insertAfter() 이동 하고 복제하지 않는다고 말합니다.