как сохранить дубликат dom после пустого в javascript?

Question

По сути, я хочу вести учет потомков 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 затем содержит детей.

Answer 1

Попробуйте вместо этого использовать 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>

Answer 2

В моем ответе используется метод jQuery .clone () .

По сути, вы скопируете элемент в переменную (rootDuplicate).

Обратите внимание, что в приведенном ниже примере rootDuplicate является элементом jQuery. Поэтому я использовал [0] для записи в журнал свойства .childnodes.

$(document).ready(function(){
  var root = $('#root');
  var rootDuplicate = root.clone();
  root.empty();
  console.log(rootDuplicate[0].childNodes);
});

<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>

Answer 3

Вы можете использовать cloneNode(deep) метод DOM api, чтобы получить копию узла для дальнейшего использования.

При клонировании узла копируются все его атрибуты и их значения, включая прослушиватели intrinsi c (inline). Он не копирует прослушиватели событий, добавленные с использованием addEventListener () или тех, кто назначен свойствам элемента (например, node.onclick = someFunction). Кроме того, для элемента нарисованное изображение не копируется.

Совет: Используйте метод appendChild () или insertBefore () для вставки клонированного узла в документ.

Подсказка: установите значение глубокого параметра в значение true, если вы хотите клонировать всех потомков (потомков), в противном случае - false.

Параметр

deep Boolean Необязательно. Указывает, следует ли клонировать всех потомков узла.
true - клонировать узел, его атрибуты и его потомков.
false - по умолчанию. Клонировать только узел и его атрибуты

Предупреждение

cloneNode () может привести к дублированию идентификаторов элементов в документе!

$(document).ready(function(){
  let root = document.getElementById('root');
  let cln = root.cloneNode(true);
  $(root).empty();
  console.log(cln .childNodes);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="root">
 <span>Test</span>
</div>