Element przenoś ny JavaScript w DOM

Question

Powiedzmy, że mam na stronie trzy elementy: <div>. Jak mogę zamienić pozycje pierwszego i trzeciego <div>? jQuery jest w porządku.

Answer 1

Trivial z jQuery

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

Jeśli chcesz to zrobić wielokrotnie, trzeba użyć różnych selektorów ponieważ div zachowa swoje identyfikatory, ponieważ są one przemieszczane.

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

Answer 2

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

i używać go tak:

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

jeśli nie chcesz używać jQuery można łatwo dostosować funkcję.

Answer 3

Nie ma potrzeby, aby korzystać z biblioteki za takie trywialne zadania:

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, third 

ta uwzględnia fakt, że getElementsByTagName zwraca żywo NodeList który jest automatycznie aktualizowane w celu odzwierciedlenia kolejność elementów w DOM gdy są zmanipulowani.

Można również użyć:

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, third 

i istnieje wiele innych możliwych permutacji, jeśli masz ochotę na eksperymenty:

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

na przykład :-)

Answer 4

podejście Jquery wymienione na top zadziała. Możesz także użyć JQuery i CSS. Powiedz, że np. Na Div jeden zastosowałeś class1 i div2 zastosowałeś class class2 (powiedzmy np., Że każda klasa css zapewnia określoną pozycję w przeglądarce), teraz możesz zamieniać klasy używając jquery lub JavaScript (który zmieni pozycję)

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

funkcja ta może wydawać się dziwne, ale w dużym stopniu opiera się na standardach, aby funkcjonować poprawnie. W rzeczywistości może wydawać się, że działa lepiej niż the jQuery version that tvanfosson posted, która wydaje się wykonywać zamianę tylko dwa razy.

Na jakich charakterystykach standardów polega?

insertBefore Wstawia węzeł newChild przed istniejącym węzłem refChild. Jeśli wartość refChild ma wartość null, wstaw newChild na na końcu listy elementów podrzędnych. Jeśli newChild jest obiektem DocumentFragment, wszystkie jego dzieci są wstawione, w tej samej kolejności, przed refChild. Jeśli newChild jest już w drzewie, jest najpierw usuwany.

Answer 6

Przepraszamy za wpadając ten wątek potknąłem problemu „Swap DOM-elementy” i bawił się trochę

Rezultatem jest jQuery-native „rozwiązanie”, który wydaje się być naprawdę ładna (niestety nie wiem, co dzieje się na wewnętrznych jQuery, gdy robi to)

kodu:

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

dokumentacja jQuery mówi t kapelusz insertAfter()porusza element i nie sklonuj go

Answer 7

.Przed i .Po

stosujemy nowoczesne waniliowy JS! Sposób lepiej/czystsze niż wcześniej

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

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

Browser Support - 84% globalnego, 87% USA jako Mar '18