DOM 요소를 일시적으로 제거했다가 나중에 다시 삽입하시겠습니까?

DOM 요소를 일시적으로 제거했다가 나중에 다시 삽입하시겠습니까?

다음을 수행할 수 있는 재쿼리 마법이 있습니까?

[0 - HTML에서 일부 요소 정의(예: 선택 취소된 확인란)]

1 - .attr()을 사용하여 속성 중 하나를 설정하여 DOM 요소를 업데이트합니다(예: .attr('checked', true)를 사용하여 "체크된" 속성을 설정함).

2 - DOM에서 해당 요소를 일시적으로 제거합니다.

3- 모든 속성을 보존하면서 원래 요소를 DOM에 다시 삽입합니다(즉, HTML에서 처음 정의했을 때와 다르게 1단계의 끝에서 확인되도록 함).

제가 DOM에서 이러한 요소를 제거하는 데 관심이 있는 이유는 (숨기기보다는) 성능이 상당히 향상되는 것 같다는 것을 알아차렸기 때문입니다.내 페이지에는 세 가지 다른 "상태"가 있으며, 주어진 상태에서 필요한 DOM 요소의 총 수는 3분의 1에 불과합니다.[나는 그것을 세 페이지로 나누지 않고 다른 상태를 가진 하나의 페이지로 유지하고 싶습니다.]

지금까지 저는 Var에 값을 저장하여 DOM에 요소를 제거하고 다시 삽입했습니다.

$("#myElement").html()

그런 다음 제거했지만, 이제 HTML을 DOM에 다시 삽입했을 때 [1단계]에서 변경한 내용이 "실행 취소"되었음을 알게 되었습니다.

나중에 다시 삽입할 수 있도록 모든 속성을 보존하는 방식으로 DOM에서 불필요한 것을 일시적으로 제거하는 방법이 있습니까?

어떤 식으로든 이해해 주셔서 감사합니다.

라라

질문에 답변한 지 6일 후 jQuery는 분리 방법이 포함된 1.4를 릴리스했습니다.당신이 찾고 있는 것과 정확히 일치합니다.

var detached = $('#element').detach();
$('body').append(detached);

다음 방법을 사용할 수 있습니다.

var els = $('.els'), saved = els.clone (true);
els.remove ();
// .... do other stuff
saved.appendTo ($('.wherever-you-want-to'));

그렇긴 하지만, 보여주고 숨기는 것이 더 낫습니다.display: none예를 들어), 매우 비싸기 때문에 DOM을 조작하는 것보다.필요한 경우 DOM 삽입 및 제거(위와 같이)를 사용합니다..html ()매번 지정된 문자열에서 노드를 재생성했습니다.

문서에서 요소를 제거하고 참조를 유지하기만 하면 됩니다.복제할 필요가 없습니다.

var el;

function removeEl() {
    el = $("#myElement")[0]; // Get the element itself
    el.parentNode.removeChild(el);
}

function reinsertEl(node) {
    node.appendChild(el);
}

예에서 언급한 바와 같이, 설정하는 것이 훨씬 간단하고 명확하며 빠릅니다.checked사용하지 않고 직접 확인란의 속성attr() 포함할 속을전포필없요실으제 jQuery의attr() 보통은 그렇지 않습니다.그냥 해요$("#myElement")[0].checked = true;모든 메인스트림 브라우저에서 작동합니다.

이것은 완전히 관련이 있는 것은 아니지만 나중에 다른 사람에게 도움이 될 수 있습니다.작은 형태의 확인란을 사용하면 해당 확인란을 완전히 확인하지 않는 것이 더 쉽다는 것을 알게 되었습니다.이는 다양한 값을 가진 제품의 설문지 또는 일련의 옵션이 있을 수 있는 상황에서 유용할 수 있습니다.다른 요소 또는 질문의 요소를 변경할 때 입력의 속성을 변경하는 것을 볼 수도 있습니다. 이것은 잠재적으로 많은 멋진 것들을 만들 수 있습니다. 여기 이 jQuery로 새 ID 설정에 대한 스택 오버플로에서 찾은 좋은 링크가 있습니다.

$("#ch1").change(function() {
$("#ch1").prop('disabled', true);
});
$("#ch2").change(function() {
$("#ch2").prop('disabled', true);
});
$("#ch3").change(function() {
$("#ch3").prop('disabled', true);
$("#ch4").prop('disabled', false);
});
$("#ch4").change(function() {
$("#ch4").prop('disabled', true);
$("#ch3").prop('disabled', false);
});
// ----> using Name selector :
//$('input[name="checkbox5"]').click(function(){
//$('input[name="checkbox6"]').prop('checked', false);			 
//    });
//$('input[name="checkbox6"]').click(function(){
//$('input[name="checkbox5"]').prop('checked', false);			 
//    });
// ----> using ID selector :
//$('input[id="ch5"]').click(function(){
//$('input[id="ch6"]').prop('checked', false);			 
//    });
// OR
//$("#ch5").click(function(){
//$("#ch6").prop('checked', false);
// });
//$("#ch6").click(function(){
//$("#ch5").prop('checked', false);			 
//    });
// ----> Using Class Selector :
$("input.checklast").change(function() {
    $("input.checklast").not(this).prop("checked", false);
  });
// which is shorter but requires that classes must be separated individually or grouped.
$("#ch5").change(function() {
$("#ch5").prop('disabled', true);
$("#ch6").prop('disabled', false);
});
$("#ch6").change(function() {
$("#ch6").prop('disabled', true);
$("#ch5").prop('disabled', false);
});

input[type=checkbox] {
  transform: scale(1.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Disabled checkboxes once checked</h1>
<form name="form1" id="form1">
<label for="ch1">Checkbox1:</label>
<input type="checkbox" name="checkbox1" id="ch1">
<br><br>
<label for="ch2">Checkbox2</label>
<input type="checkbox" name="checkbox2" id="ch2">
<br><br>
<input type="reset" name="resform1" id="resetf1">
</form>
<form name="form2" id="form2">
<h1> Checkboxes disabled if either is selected</h1>
<label for="ch3">Checkbox3:</label>
<input type="checkbox" name="checkbox3" id="ch3">
<br><br>
<label for="ch4">Checkbox4</label>
<input type="checkbox" name="checkbox4" id="ch4">
</form>
<h1> Combine Second Example with uncheck if checked and you get:</h1>
<form name="form3" id="form3">
<label for="ch5">Checkbox3:</label>
<input type="checkbox" class="checklast" name="checkbox5" id="ch5">
<br><br>

<label for="ch6">Checkbox4</label>
<input type="checkbox" class="checklast" name="checkbox6" id="ch6">
</form>

언급URL : https://stackoverflow.com/questions/2026386/temporarily-removing-and-later-reinserting-a-dom-element