DOM에서 JavaScript 이동 요소

DOM에서 JavaScript 이동 요소

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

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

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를 조작할 때 DOM에 있는 요소의 순서를 반영하도록 자동으로 업데이트되는 실시간 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]));

예를 들어 :-)

사소한 jQuery 사용

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

반복적으로 하려면 디브가 이동할 때 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 버전보다 더 잘 작동하는 것처럼 보일 수 있습니다.

그것은 어떤 표준적인 특징에 의존합니까?

insert Before 기존 자식 노드 refChild 이전에 newChild 노드를 삽입합니다.refChild가 null이면 child 목록 끝에 newChild를 삽입합니다.newChild가 DocumentFragment 개체인 경우, 모든 하위 항목은 refChild 이전에 같은 순서로 삽입됩니다.새 자식이 이미 트리에 있으면 먼저 제거됩니다.

위에 언급된 Jquery 접근 방법이 효과가 있을 것입니다.당신은 JQuery와 CSS를 사용할 수도 있습니다. 예를 들어, Divone에서 당신은 class1을 적용했고 div2에서는 class2를 적용했다고 말하십시오(예를 들어, css의 각 클래스는 브라우저에서 특정 위치를 제공합니다). 이제 당신은 jquery나 javascript를 사용하여 클래스를 교환할 수 있습니다(위치를 변경합니다).

이 스레드를 부딪쳐서 죄송합니다. "스왑 DOM-elements" 문제에 걸려 조금 놀았습니다.

결과는 jQuery-native "솔루션"으로 정말 예뻐 보입니다. (불행히도 이것을 할 때 jQuery internals에서 무슨 일이 일어나는지 모릅니다.)

The Code:

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

가 .insertAfter() 요소를 이동하고 복제하지 않습니다.

언급URL : https://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom