두 엘리먼트의 자리 바꾸기

Seungmin Lim·2022년 1월 24일
0

JavaScript

목록 보기
31/41

replaceChild() / replaceWith()

    swapButton.onclick = function(){
        var inputs = tbody.querySelectorAll("input[type='checkbox']:checked");
        if(inputs.length != 2){
            alert("2개를 선택해야만 합니다.");
            return;
        }
        var trs = [];
        for(var i = 0; i<inputs.length; i++){
            trs.push(inputs[i].parentElement.parentElement);
        }

        var cloneNode = trs[0].cloneNode(true);
        trs[1].replaceWith(cloneNode);
        trs[0].replaceWith(trs[1]);
    };

inputs 변수에 체크가 된 엘리먼트를 선택하고,
선택된 엘리먼트의 부모의 부모(tr태그)를 담는 trs배열을 만들어줬다.
.push() , cloneNode(boolean)

두 tr태그를 바꾸기위해 trs[0]을 복제하고, 복제품으로 trs[1]을 대체시킨다. .replaceWith()
그 후, trs[0]자리를 trs[1]로 대체시킨다.
그렇게되면 원래 원본의 trs[0]은 garbage로 버려진다.

0개의 댓글

관련 채용 정보