replaceWith（）而不删除原始元素

Question

是否存在类似于replaceWith()的jQuery函数，用新元素替换元素，而不破坏原始元素（只是隐藏它）。

Answer 1

结合使用hide ^{[API Ref]} 和after ^{[{{3} }]} ：

$('#oldElem').hide().after($('#newElem'));

Answer 2

这样的事情怎么样？

$(this).before("this is what I'm inserting").hide();

Answer 3

你可以这样做：

<button>replace</button>
<div class="toReplace">your first content</div >
<div class="toReplace" style="display: none">your second content</div >

然后在js：

$("button").click(function () {
  $("toReplace").toggle();
});

Answer 4

切换可见性在某些情况下可能有效，但首选方法是克隆原始元素。例如：

var clone = $('#elementOne');
$('#elementToBeReplaced').replaceWith(clone);

这在管理表单输入时特别有用，因为DOM不关心元素是否可见。

Answer 5

只需在元素之后或之前插入元素，然后隐藏元素本身。试试这个

$("element").hide().after($("newElement"));

Answer 6

如果你想用css隐藏它，只需在.hide()之前调用.after()，如：

$('#theolddiv').hide().after('$(<div>The new div</div>'));

如果你想从DOM中完全删除它，不只是用css隐藏它，而是希望以后能够重新插入它，甚至可能在DOM中的其他地方，然后将它存储在一个变量中： / p>

var $x = $('#theolddiv');
$x.replaceWith('<div>The new div</div>');
// Do stuff here, you can put $x back in the DOM if you want.

这实际上是对象的副本，但它足够好了:)）