时间戳

首页 > 解决方案 > 如何在javascript中为空后保留dom的副本？

javascript - 如何在javascript中为空后保留dom的副本？

问题描述

基本上我想在调用函数后记录一个 DOM 子节点empty()。

我在下面尝试过，但我的副本是空的：

$(document).ready(function(){
  var root = document.getElementById('root');
  var rootDuplicate = root;
  $(root).empty();
  console.log(rootDuplicate.childNodes);
});

演示：https ://jsfiddle.net/sgLub16d/21/

在上面，如果你删除$(root).empty();线。rootDuplicate然后包含孩子。

标签： javascriptjquery

解决方案

考虑replaceWith改用 - 这样，您可以用空替换，<span id="root">同时保留对旧填充的引用：

var root = document.getElementById('root');
var rootDuplicate = root;
$(root).replaceWith($('<span id="root" />'));
console.log(rootDuplicate.childNodes.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="root">some data<span id="child"> here</span></span>

另一种方法是.childNodes先将 保存在数组中：

const children = [...$('#root')[0].childNodes];
$('#root').empty();
console.log(children.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="root">some data<span id="child"> here</span></span>

推荐阅读