Временно удалить и позже вставить элемент DOM?

Есть ли какая-нибудь магия jquery, которая позволит мне сделать следующее:

[0- определить какой-либо элемент в HTML (например, флажок без флажка)]

1- обновить свой элемент DOM, установив один из его атрибутов с помощью .attr() (например, установив свой атрибут "checked", используя .attr( "checked", true))

2- временно удалите этот элемент из DOM

3 снова вставьте исходный элемент в DOM, сохраняя все его свойства (т.е. чтобы он был проверен, как это было в конце шага 1 - НЕ понравилось, когда оно было первоначально определено в HTML)

Причина, по которой я заинтересован в том, чтобы удалить эти элементы из DOM (а не скрывать их), заключается в том, что я заметил, что, похоже, это улучшает производительность. Моя страница имеет три разных "состояния", и только одна треть от общего количества элементов DOM требуется в любом состоянии. [Я хочу сохранить его как отдельную страницу с разными состояниями, а не разбивать ее на три отдельные страницы.]

До сих пор я удалял и повторно вставлял элементы в DOM, сохраняя в var значение

$("#myElement").html()

а затем удалив его, но теперь я заметил, что при вставке этого HTML в DOM изменения, сделанные [на шаге 1], были "отменены".

Есть ли способ сделать это - временно удалить ненужные вещи из DOM таким образом, чтобы сохранить все его свойства для последующей реинтеграции?

спасибо за понимание,

лара

Ответ 1

Вы можете использовать метод clone:

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

Тем не менее, лучше показать и скрыть их (например, через display: none), чем манипулировать DOM, поскольку это очень дорого. Если вам нужно, используйте DOM-вставку и удаление (как указано выше), а не .html (), которые каждый раз воссоздавали node из данной строки.

Ответ 2

Через шесть дней после ответа на вопрос jQuery выпустил 1.4, который содержит метод detach. Что делает именно то, что вы ищете.

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

Ответ 3

Просто удалите элемент из документа и сохраните ссылку на него. Нет необходимости клонировать его.

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;. Он работает во всех основных браузерах.

Ответ 4

Это не совсем актуально, но может быть полезно кому-то еще позже. С небольшой формой флажков я обнаружил, что их вообще легче проверять. Это может пригодиться в ситуациях, когда у вас может быть вопросник или ряд вариантов продукта с различными значениями. Вы могли бы даже взглянуть на изменение атрибутов на входе при изменении другого элемента или элемента в вопросах. Это может потенциально создать много интересных вещей, вот хорошая ссылка, которую я нашел на переполнение стека для этого Set new id with jQuery.

$("#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>