Почему клонированный dom элемент меняется вместе с оригиналом?

Question

[Leonardo-lavanda]

Хотел написать функцию для элементов меню, которые не влезают. Работает, но я хочу, чтобы она также работала и при ресайзе, но при обратном расширении окна меню остается маленьким, вместо того, чтобы вернуть предыдущее меню.
Проблема конкретно в том, что клонированный элемент в конце работы равен текущему меню

$(function() {


	// overflowMenu

	function overflowMenu(menu, originalMenu) {
		$(menu).replaceWith(originalMenu)
		
		console.log(originalMenu.children())

		var navWidth = $(menu).width(),
			sumWidth = 0,
			nextWidth = 0;
			hiddenElements = [];

		$(menu + ' li').each(function(e) {
			
			sumWidth += this.offsetWidth;
			nextWidth = $(menu + ' li')[e + 1] === undefined ? 0 : $(menu + ' li')[e + 1].offsetWidth;

			if (nextWidth + sumWidth > navWidth) { 
				hiddenElements.push(this); 
			}

			if (hiddenElements.length == 1) {
				$(menu + ' li:last-child').after('<li><a href="#">Еще <img class="icon" src="img/icons/arrow_d.svg" alt="" /></a></li>');
			}

		});
		

		for (var i = 0; i < hiddenElements.length; i++) {
			hiddenElements[i].remove();
		}
	}



	const originalMenu = $('.main-head__nav ul').clone();
	$('main-head__nav ul').remove();


	overflowMenu('.main-head__nav ul', originalMenu);

	$(window).resize(function() {
		overflowMenu('.main-head__nav ul', originalMenu);
	});


});

Answer 1

[rhajizada]

Любой Dom элемент является объектом в JavaScript и как любой объект в отличии от примитивного типа при клонировании лишь передает указатель клонируемого объекта в конечный объект. Поэтому при изменении клона изменяется и оригинал поэтому что они указывает на одно и тоже в памяти.

let original = {
item: 'a',
index: 1
}
let clone = original;  // Указатель у clone и original одинаковый
clone.item = 'b';
console.log(clone); // { item: 'b', index: 1 }
console.log(original);  // {item: 'b', index: 1}

Вместо этого лучше в ручную копировать объект

let clone = { ...original } // используем так называемый spread opeator

теперь у нас клон с другим указателем чем оригинал
Пример использования