DOM의 JavaScript 이동 요소

DOM의 JavaScript 이동 요소

---

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

브라우저 지원 -'19 년 9 월 현재 전 세계 92 %

---

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 approach mentioned on the top will work. You can also use JQuery and CSS .Say for e.g on Div one you have applied class1 and div2 you have applied class class2 (say for e.g each class of css provides specific position on the browser), now you can interchange the classes use jquery or javascript (that will change the position)

---

Sorry for bumping this thread I stumbled over the "swap DOM-elements" problem and played around a bit

The result is a jQuery-native "solution" which seems to be really pretty (unfortunately i don't know whats happening at the jQuery internals when doing this)

The Code:

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

The jQuery documentation says that insertAfter() moves the element and doesn't clone it

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