暂时删除并稍后重新插入 DOM 元素？

Posted 2023-02-22

【中文标题】暂时删除并稍后重新插入 DOM 元素？

【英文标题】：temporarily removing and later reinserting a DOM element?

【发布时间】：2011-01-02 20:09:36

【问题描述】：

是否有一些 jquery 魔法可以让我执行以下操作：

[0- 在 html 中定义一些元素（例如，一个 unchecked 复选框）]

1- 通过使用 .attr() 设置其属性之一来更新其 DOM 元素（例如，通过使用 .attr('checked', true) 设置其“已检查”属性）

2- 暂时从 DOM 中移除该元素

3- 将原始元素重新插入到 DOM 中，同时保留其所有属性（即，在第 1 步结束时对其进行检查——与最初在 HTML 中定义时不同）

我之所以有兴趣从 DOM 中删除这些元素（而不是隐藏它们）是因为我注意到它似乎可以很好地提高性能。我的页面具有三种不同的“状态”，在任何给定状态下，只需要三分之一的 DOM 元素总数。 [我希望将其保留为具有不同状态的单个页面，而不是将其分成三个单独的页面。]

到目前为止，我一直在通过将

的值存储在 var 中来删除和重新插入元素到 DOM

$("#myElement").html()

然后删除它，但现在我注意到在将该 HTML 重新插入 DOM 后，[在第 1 步中]所做的更改已“撤消”。

有没有办法做到这一点——暂时从 DOM 中删除不需要的东西，同时保留其所有属性以供以后重新插入？

感谢您的任何见解，

拉拉

【参考方案1】：

在回答问题六天后，jQuery 发布了 1.4，其中包含 detach 方法。这正是您正在寻找的。​​p>

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

【参考方案2】：

您可以使用clone 方法：

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

不过，尽管如此，最好显示和隐藏它们（例如通过display: none），而不是操纵 DOM，因为它非常昂贵。如果必须，请使用 DOM 插入和删除（如上），而不是 .html ()，它每次都从给定字符串重新创建一个节点。

【讨论】：

@Luca - 没关系，一旦重新插入它们，它们将保留以前的状态，正如 OP 所希望的那样

@K Prime - 非常感谢，正是我想要的！将 'true' 参数巧妙地传递给 clone() 甚至可以保留事件处理程序以便重新插入。太好了！

作为额外... jQuery 对象的 .show() 和 .hide() 方法将根据需要设置 display 属性。

使用这种方法，您将丢失与 $('.els') 相关的事件。甚至 clone(true, true) - 深度复制也不能像我宣传的那样工作。如果您想稍后“删除”和“插入”并维护所有内容，这对我来说效果更好：***.com/a/6272110/186782

【参考方案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;。它适用于所有主流浏览器。

【讨论】：

@Tim，感谢您的提示！不知道我可以那样做。 （我在没有实际使用过“香草”javascript 的情况下学习了 jquery...）

@laramichaels 这是 jquery，而不是原生 javascript

@user25 This 是只使用纯 JavaScript（根本没有 jquery）的类似示例。

【参考方案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>